<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正方体3D旋转</title>
<style>
*{
padding: 0;
margin: 0;
}
.outer {
width: 200px;
height: 200px;
/* border: 1px solid black; */
margin: 200px auto;
/* 景深属性 */
perspective: 3000px;
}
ul {
position: relative;
width: 200px;
height: 200px;
list-style: none;
/* 如果某一个标签既为舞台又为演员,加上transform-style */
transform-style: preserve-3d;
transform: rotateY(0deg);
animation: donghua 2s linear 0s infinite;
}
li {
position: absolute;
width: 200px;
height: 200px;
/* background: red; */
opacity: 0.5;
}
li:nth-child(1) {
background: orange;
transform: translateZ(100px);
}
li:nth-child(2) {
background: yellow;
transform: translateZ(-100px);
}
li:nth-child(3) {
background: green;
transform: translateY(100px) rotateX(90deg);
}
li:nth-child(4) {
background: cyan;
transform: translateY(-100px) rotateX(90deg);
}
li:nth-child(5) {
background: blue;
transform: translateX(-100px) rotateY(90deg);
}
li:nth-child(6) {
background: purple;
transform: translateX(100px) rotateY(90deg);
}
@-webkit-keyframes donghua{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="outer">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
正方体3D旋转
最新推荐文章于 2022-07-31 13:10:04 发布