绕X轴动弹，正常来说是需要3D结果才可以实现的，那么我们在网页平面上怎么实现这个结果呢？
文章插图
需要这些哦
电脑
Sublime
方式/
1起首介绍一下小编的页面架构，div——stage（舞台），div——container（容器），和一个 img （就是兔子图片）
文章插图
2先设置一下舞台的样式，宽度 500px ；高度 324px； 设置一个红色的边框，作为后面 图片动弹时的对比；（其它的 图片中有注释）
文章插图
3容器（container）div，是节制图片的关头，图片在容器中，容器变更，图片天然也跟着变更；然后设置 过渡结果 （transition）实现动态的过程；设置完当作今后初步结果如图二，只不外无法动弹；
文章插图
文章插图
4想要实现动弹，还要设置一下 ：hover 这个选择器 ，给 容器添加一个转变，即一个扭转的转变，用transform 属性节制；代码如图
文章插图
5【兔子图片绕X轴3D转动90度事例】下图是小编本身页面的整个代码图，供大师参考；（有些不关头的属性可以自由设置的，好比图片，宽度，高度等等）
文章插图
注重事项小我进修经验，仅作分享
注重浏览器的兼容性
以上内容就是兔子图片绕X轴3D转动90度事例的内容啦，希望对你有所帮助哦！
推荐阅读
- 新年绘画图片一家人简笔画
- 如何将图片与视频合并
- 怎么用ps改字
- 拉布拉多壁纸高清壁纸 拉布拉多手机壁纸高清图片
- 泰迪剃毛后图片 泰迪剃毛后老挠痒痒
- 黑色拉布拉多小狗图片大全 拉布拉多小狗爪子大
- 怎样在word文档的图片上面添加文字？
- ppt怎么设置插入背景图片
- 卡通小兔子简笔画图片 小兔子的可爱画法
- 怎样使用ps将彩色图片变成黑白图片