<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
}
body {
/* perspective视距添加给body */
perspective: 800px;
}
.cube {
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: 50px auto;
/* 开启父元素的相对定位 */
position: relative;
animation: r3d 15s infinite linear;
}
img {
/* 设置图片为不是基线对齐的方式 */
vertical-align: top;
}
.cube > div {
height: 200px;
width: 200px;
/* 开启子元素的绝对定位,让子元素都重叠到了一起 */
position: absolute;
opacity: .7;
}
.box1 {
transform: rotateY(90deg) translateZ(100px);
}
.box2{
transform: rotateY(-90deg) translateZ(100px);
}
.box3{
transform: rotateX(-90deg) translateZ(100px);
}
.box4{
transform: rotateX(90deg) translateZ(100px);
}
.box5{
transform: rotateX(0deg) translateZ(100px);
}
.box6{
transform: rotateY(180deg) translateZ(100px);
}
@keyframes r3d {
from {
transform: rotateX(0) rotateZ(0);
}
to {
transform: rotateX(1turn) rotateZ(1turn);
}
}
</style>
</head>
<body >
<div class="cube">
<div class="box1">
<img src="./img/r/1.jpg" >
</div>
<div class="box2">
<img src="./img/r/2.jpg" >
</div>
<div class="box3">
<img src="./img/r/3.jpg" >
</div>
<div class="box4">
<img src="./img/r/4.jpg" >
</div>
<div class="box5">
<img src="./img/r/5.jpg" >
</div>
<div class="box6">
<img src="./img/r/6.jpg" >
</div>
</div>
</body>
</html>
CSS复仇者联盟立体盒子
最新推荐文章于 2023-01-13 12:47:03 发布