张子豪绕X轴动弹，正常来说是需要3D结果才可以实现的，那么我们在网页平面上怎么实现这个结果呢？
东西/原料
- 电脑
- Sublime
方式/步调
- 1
起首介绍一下小编的页面架构，div——stage（舞台），div——container（容器），和一个 img （就是兔子图片）
- 2
先设置一下舞台的样式，宽度 500px ；高度 324px； 设置一个红色的边框，作为后面 图片动弹时的对比；（其它的 图片中有注释）
- 3
容器（container）div，是节制图片的关头，图片在容器中，容器变更，图片天然也跟着变更；然后设置 过渡结果 （transition）实现动态的过程；设置完当作今后初步结果如图二，只不外无法动弹；
- 4
想要实现动弹，还要设置一下 ：hover 这个选择器 ，给 容器添加一个转变，即一个扭转的转变，用transform 属性节制；代码如图
- 5
下图是小编本身页面的整个代码图，供大师参考；（有些不关头的属性可以自由设置的，好比图片，宽度，高度等等）
注重事项
- 小我进修经验，仅作分享
- 注重浏览器的兼容性
来源：百闻（微信/QQ号：9397569），转载请保留出处和链接！
本文链接：https://www.ibaiwen.com/web/237339.html
- 热门文章
-
WB蒙特利尔(WB Montreal)——欧美十大最差视频游戏开发商
迅猛龙(Velociraptor)——欧美史前十大死亡动物
什么是果酱猫(What Marmalade Cats)？
神奇蜘蛛侠2(The Amazing Spider-Man 2)——欧美最佳蜘蛛侠电影
希瑟(Heather)——欧美十大最佳柯南灰歌
二人梭哈
faceu激萌怎么把瘦脸开到最大
奥兹奥斯本(Ozzy Osbourne)——欧美十大高估歌手
什么是小脑前下动脉(Anterior Inferior Cerebellar Artery)？
我应该知道康涅狄格州的什么(What Should I Know About Connecticut)？
- 热评文章
- 最新评论
-
- 最近访客
-
- 站点信息
-
- 文章总数:200248
- 页面总数:9
- 分类总数:1
- 标签总数:0
- 评论总数:0
- 浏览总数:497