1、效果展示
2、免费代码下载
CSS+立体盒子动画+复仇者联盟-Javascript文档类资源-CSDN下载
3、HTML代码结构
<body> <div class="wrapDiv"> <div class="div1"> <img src="./img/1.jpg" alt=""> </div> <div class="div2"> <img src="./img/2.jpg" alt=""> </div> <div class="div3"> <img src="./img/3.jpg" alt=""> </div> <div class="div4"> <img src="./img/4.jpg" alt=""> </div> <div class="div5"> <img src="./img/5.jpg" alt=""> </div> <div class="div6"> <img src="./img/6.jpg" alt=""> </div> </div> </body>
4、CSS样式编写
<style> *{ margin: 0; } body { /* perspective视距添加给body */ perspective: 800px; } .wrapDiv{ width: 200px; height: 200px; margin: 350px auto; transform-style: preserve-3d; /* transform: rotateX(45deg) rotateZ(45deg); */ animation: r3d 15s infinite linear; } img { /* 设置图片为不是基线对齐的方式 */ vertical-align: top; width: 200px; height: 200px; } .wrapDiv>div{ width: 200px; height: 200px; /* 开启子元素的绝对定位 */ position: absolute; opacity: .7; } .div1{ transform: rotateY(90deg) translateZ(100px); } .div2{ transform: rotateY(-90deg) translateZ(100px); } .div3{ transform: rotateX(-90deg) translateZ(100px); } .div4{ transform: rotateX(90deg) translateZ(100px); } .div5{ transform: rotateX(0deg) translateZ(100px); } .div6{ transform: rotateY(180deg) translateZ(100px); } @keyframes r3d { from { transform: rotateX(0) rotateZ(0); } to { transform: rotateX(1turn) rotateZ(1turn); } } </style>
