css3D立方体旋转动画
程序员文章站
2022-07-12 23:33:34
...
效果图
html立方体结构
整个立方体的结构分为六个正方形面，所以需定义六个div结构来表示立方体的六个平面，再用css3的transform属性移动六个平面组成3D的立方体结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3旋转立方体复刻1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>
css3立方体样式
六个平面 正方形可以通过transform方法进行空间旋转和平移组成3D立方体。html页面内的坐标系水平方向自左向右为正方向、垂直方向自下向上为正方向、Z轴自页面内向页面外为正方向。六个面的移动参数如下：
1：Z轴方向移动50px和-50px组成前后两个面。
2：沿Y轴旋转90度和-90度，然后分别沿Z轴移动50px（平面沿X和Y轴旋转之后Z轴的方向会响应改变）组成左右两个面。
3：沿X轴旋转90度和-90度，然后分别沿Z轴移动50px，组成上下两个面。
.item1{
background-color: #ff0;
transform: translateZ(50px);
}
.item2{
background-color: #f40;
transform: translateZ(-50px);
}
.item3{
background-color: #0ff;
transform: rotateY(-90deg) translateZ(50px);
}
.item4{
background-color: #0ff;
transform: rotateY(90deg) translateZ(50px);
}
.item5{
background-color: #00f;
transform: rotateX(90deg) translateZ(50px);
}
.item6{
background-color: #f0f;
transform: rotateX(-90deg) translateZ(50px);
}
从立体坐标系上看六个正方形已经组成立方体，但从页面观察此时的页面结构仍为平面图形，因此需要给父级元素设置3D属性。给父级元素设置居中显示，加上transform-style属性，使之能够被人眼观察到3D动画。整个立方体的旋转特效使用animation关键帧动画实现。
.wrapper{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-90deg);
transform: all 1s;
animation: inifinteRotate 10s infinite linear;
}
@keyframes inifinteRotate{
0%{
transform: rotateY(360deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
利用关键帧动画让立方体父级元素围绕XYZ轴进行360度匀速旋转即可以实现单靠css3属性 实现3D立方体旋转动画。完整css代码如下：
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-90deg);
transform: all 1s;
animation: inifinteRotate 10s infinite linear;
}
@keyframes inifinteRotate{
0%{
transform: rotateY(360deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.item{
width: 100%;
height: 100%;
position: absolute;
font-size: 36px;
color: #fff;
text-align: center;
line-height: 100px;
opacity: 0.3;
}
.item1{
background-color: #ff0;
transform: translateZ(50px);
}
.item2{
background-color: #f40;
transform: translateZ(-50px);
}
.item3{
background-color: #0ff;
transform: rotateY(-90deg) translateZ(50px);
}
.item4{
background-color: #0ff;
transform: rotateY(90deg) translateZ(50px);
}
.item5{
background-color: #00f;
transform: rotateX(90deg) translateZ(50px);
}
.item6{
background-color: #f0f;
transform: rotateX(-90deg) translateZ(50px);
}