如何实现图片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.必须是鼠标移动到目标图片上才会出现此效果。
&
以上就是全部内容。
如果这篇文章对你有帮助的话不妨点赞支持一下！
![[2024年]挥洒五四：对青年激情与思考的700字作文](https://700zi.400zi.cn/uploadfile/img/2024/05/26/73baf1ca6dcbab9dc9954012bf706a16.jpg)
