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>