<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ display:block; width: 215px; height: 215px; } .box{ position: relative; perspective: 1000px; transform-style: preserve-3d; transform: rotateX(-34deg) rotateY(-30deg) ; width: 226px; margin:250px auto; height: 226px; } .a, .b, .c, .d, .e, .f{ width: 226px; height: 226px; background-color: rgb(230,230,229); padding: 5px; position: absolute; transition: all 2s; transform-origin: bottom; } .a:hover{transform: rotateY(60deg)translateZ(300px) scale(1.5)} .b:hover{transform: rotateY(120deg) translateZ(300px) scale(1.5)} .c:hover{transform: rotateY(180deg) translateZ(300px) scale(1.5)} .d:hover{transform: rotateY(240deg) translateZ(300px) scale(1.5)} .e:hover{transform: rotateY(300deg) translateZ(300px) scale(1.5)} .f:hover{transform: rotateY(360deg) translateZ(300px) scale(1.5)} .a{ transform: rotateY(60deg)translateZ(300px) ; } .b{ transform: rotateY(120deg) translateZ(300px) ; } .c{ transform: rotateY(180deg) translateZ(300px); } .d{ transform: rotateY(240deg) translateZ(300px); } .e{ transform: rotateY(300deg) translateZ(300px); } .f{ transform: rotateY(360deg) translateZ(300px); } </style> </head> <body> <div class="box"> <div class="a"><img src="img/1.jpg" alt=""></div> <div class="b"><img src="img/2.jpg" alt=""></div> <div class="c"><img src="img/3.jpg" alt=""></div> <div class="d"><img src="img/4.jpg" alt=""></div> <div class="e"><img src="img/5.jpg" alt=""></div> <div class="f"><img src="img/6.jpg" alt=""></div> </div> </body> </html>
注意:在hover和布局位置的时候一定要按照先旋转在位移最后放大缩小的顺序 否则会出现错误
原文：https://www.cnblogs.com/Ironman725/p/11042820.html