如何实现图片2D,3D翻转效果？
直接上代码：
一、2D翻转：
/*2D翻转*/
.cartoon_0 {
transition: transform 2s
/*反转动画关键*/
}
/*利用hover设置鼠标移动效果*/
.cartoon_0:hover {
transform: rotate(360deg);
}
再让图片调用：
<body>
<div class="box_0"><img src="../Img/juhuajiu.jpg" width="150px" height="150px" class="cartoon_0"></div>
</body>
二、3D翻转：
/*3D翻转*/
.cartoon_1 {
transition: transform 2s
/*反转动画关键*/
}
.cartoon_1:hover {
transform: rotateY(360deg);
}
再让图片调用：
<body>
<div class="box_0"><img src="../Img/juhuajiu.jpg" width="150px" height="150px" class="cartoon_1"></div>
</body>
三、2D放大+翻转：
.cartoon_2 {
transition:width 2s,height 2s,transform 2s;
/*反转动画关键*/
}
.cartoon_2:hover {
transform: rotate(360deg);
width: 200px;/*设置放大后长宽*/
height: 200px;
}
再次让图片调用：
<body>
<div class="box_0"><img src="../Img/juhuajiu.jpg" width="150px" height="150px" class="cartoon_2"></div>
</body>
注：
1.这个翻转效果如果调用标签的话也对盒子管用。
2.使用3D翻转，鼠标在翻转过程中脱离图片容易出现鬼畜情况。
3.必须是鼠标移动到目标图片上才会出现此效果。
&
以上就是全部内容。
如果这篇文章对你有帮助的话不妨点赞支持一下！
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
