<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>正方体</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background-color: black;
}
.cube{
position: relative;
width: 400px;
height: 400px;
margin: 220px auto;
/* flat/preserve-3d 指定某元素的子元素位于该元素的平面内或三维空间内 */
transform-style: preserve-3d;
animation: animation 5s linear infinite;
}
@keyframes animation {
from{transform: rotatex(0deg) rotatey(0deg);}
to{transform: rotatex(360deg) rotatey(360deg);}
}
.square{
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
background-color: rgba(0, 0, 253, 0.42);
border-radius: 20%;
}
.square1{
transform: translatez(200px);
}
.square2{
transform: translatez(-200px);
}
.square3{
transform: rotatey(90deg) translatez(200px);
}
.square4{
transform: rotatey(90deg) translatez(-200px);
}
.square5{
transform: rotatex(90deg) translatez(-200px);
}
.square6{
transform: rotatex(90deg) translatez(200px);
}
/* rotate旋转后，坐标轴也会随之旋转 */
</style>
</head>
<body>
<div class="cube">
<div class="square1 square"></div>
<div class="square2 square"></div>
<div class="square3 square"></div>
<div class="square4 square"></div>
<div class="square5 square"></div>
<div class="square6 square"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>球体</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
background-color: black;
}
.sphere{
width: 400px;
height: 400px;
position: relative;
margin: 200px auto;
transform-style: preserve-3d;
animation: animation 5s linear infinite;
}
@keyframes animation {
from{transform:rotatey(0deg);}
to{transform: rotatey(360deg);}
}
.sphere_1{
width: 400px;
height: 400px;
position: absolute;
transform-style: preserve-3d;
}
.sphere_2{
transform: rotatez(45deg);
}
.circle{
width: 400px;
height: 400px;
border: 1px solid gold;
border-radius: 50%;
position: absolute;
}
.circle1{
transform: rotatey(0deg);
}
.circle2{
transform: rotatey(30deg);
}
.circle3{
transform: rotatey(60deg);
}
.circle4{
transform: rotatey(90deg);
}
.circle5{
transform: rotatey(120deg);
}
.circle6{
transform: rotatey(150deg);
}
.circle7{
transform: rotatey(180deg);
}
</style>
</head>
<body>
<div class="sphere">
<div class="sphere_1">
<div class="circle1 circle"></div>
<div class="circle2 circle"></div>
<div class="circle3 circle"></div>
<div class="circle4 circle"></div>
<div class="circle5 circle"></div>
<div class="circle6 circle"></div>
<div class="circle7 circle"></div>
</div>
<div class="sphere_1 sphere_2">
<div class="circle1 circle"></div>
<div class="circle2 circle"></div>
<div class="circle3 circle"></div>
<div class="circle4 circle"></div>
<div class="circle5 circle"></div>
<div class="circle6 circle"></div>
<div class="circle7 circle"></div>
</div>
</div>
</body>
</html>