用html做立方体，并旋转
前言
刚开始学HTML时以为只能做网页，可是，
HTML彻底颠覆了我的认知。
分析
经我一波操作，搭出来一个正方体。
首先，要完成我们这个项目有三个重要的地方，分别是：
观察层：视角
3D体：开启HTML3d模式
3D面：旋转
从观察层开始，视角距离我们要用perspactive来实现近大远小。这是HTML坐标系
注意它的旋转方向。
3d层，3d打开方式。transform-style: preserve-3d;语句。
旋转，涉及到动画，等会儿再讲。
开肝
构建3d体。
这样做：创建6个button，把他们放在一起，开启3d，制作三维效果，最后调整位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #fff;
background: rgba(255, 255, 255,0.75);
color: #fff;
font-size: 100px;
line-height: 200px;
text-align: center;
position: absolute;
transition: 2s;
}
body{
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
background: #000;
height: 100vh;
}
.box:nth-of-type(1){transform: rotateY(90deg) translateZ(100px);}
.box:nth-of-type(2){transform: rotateY(-90deg) translateZ(100px);}
.box:nth-of-type(3){transform: rotateX(90deg) translateZ(100px);}
.box:nth-of-type(4){transform: rotateX(-90deg) translateZ(100px);}
.box:nth-of-type(5){transform: rotateY(0deg) translateZ(100px);}
.box:nth-of-type(6){transform: rotateY(180deg) translateZ(100px);}
.boxs{
position: absolute;
/* transform: rotateX(45deg) rotateY(45deg); */
transform-style: preserve-3d;
width: 200px;
height: 200px;
animation: go 3s infinite linear;
animation-play-state: running;
}
</style>
</head>
<body>
<div class="boxs">
<div class="box first">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
效果：
有可能看不太清，我改了一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #fff;
background: rgba(255, 255, 255,0.75);
color: #fff;
font-size: 100px;
line-height: 200px;
text-align: center;
position: absolute;
transition: 2s;
}
body{
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
background: #000;
height: 100vh;
}
.box:nth-of-type(1){transform: rotateY(90deg) translateZ(100px);}
.box:nth-of-type(2){transform: rotateY(-90deg) translateZ(100px);}
.box:nth-of-type(3){transform: rotateX(90deg) translateZ(100px);}
.box:nth-of-type(4){transform: rotateX(-90deg) translateZ(100px);}
.box:nth-of-type(5){transform: rotateY(0deg) translateZ(100px);}
.box:nth-of-type(6){transform: rotateY(180deg) translateZ(100px);}
.boxs{
position: absolute;
transform: rotateX(45deg) rotateY(45deg);
transform-style: preserve-3d;
width: 200px;
height: 200px;
animation: go 3s infinite linear;
animation-play-state: running;
}
</style>
</head>
<body>
<div class="boxs">
<div class="box first">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
效果：
很不错。
接下来就实现旋转了，动画效果，要用到
@keyframes go{
0%{}
100%{}
}
只要可以计算，就可以放进0%和100%后的大括号里，刚开始，我们要把它设为正面，也就是rotateX和rotateY为0deg,deg就是角度，然后，再100%时我们可以将它的rotateX和rotateY设为720deg。
代码长这样：
@keyframes go{
0%{transform: rotateX(0deg) rotateY(0deg);}
100%{transform: rotateX(720deg) rotateY(360deg);}
}
最终代码
我添加了一点特殊效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #fff;
background: rgba(255, 255, 255,0.75);
color: #fff;
font-size: 100px;
line-height: 200px;
text-align: center;
position: absolute;
transition: 2s;
}
body{
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
background: #000;
height: 100vh;
}
.boxs,.boxs2{
position: absolute;
transform: rotateX(45deg) rotateY(45deg);
transform-style: preserve-3d;
width: 200px;
height: 200px;
animation: go 3s infinite linear;
animation-play-state: running;
}
.boxs:hover{
animation-play-state: paused;
}
.box:nth-of-type(2){transform: rotateY(-90deg) translateZ(100px);}
.box:nth-of-type(3){transform: rotateX(90deg) translateZ(100px);}
.box:nth-of-type(4){transform: rotateX(-90deg) translateZ(100px);}
.box:nth-of-type(5){transform: rotateY(0deg) translateZ(100px);}
.box:nth-of-type(6){transform: rotateY(180deg) translateZ(100px);}
.boxs2>.box:nth-of-type(1){transform: rotateY(90deg) translateZ(25px);}
.boxs2>.box:nth-of-type(2){transform: rotateY(-90deg) translateZ(25px);}
.boxs2>.box:nth-of-type(3){transform: rotateX(90deg) translateZ(25px);}
.boxs2>.box:nth-of-type(4){transform: rotateX(-90deg) translateZ(25px);}
.boxs2>.box:nth-of-type(5){transform: rotateY(0deg) translateZ(25px);}
.boxs2>.box:nth-of-type(6){transform: rotateY(180deg) translateZ(25px);}
.boxs2>.box{
width: 50px;
height: 50px;
font-size: 36px;
line-height: 50px;
background: rgba(140, 228, 8, 0.25);
}
.boxs2{
width: 50px;
height: 50px;
}
.first{
transform-origin: 0%;
transform: translateZ(100px) translateX(200px) rotateY(90deg);
}
.boxs:hover .first{
transform: translateZ(100px) translateX(200px) rotateY(0deg);
}
@keyframes go{
0%{transform: rotateX(0deg) rotateY(0deg);}
100%{transform: rotateX(720deg) rotateY(360deg);}
}
</style>
</head>
<body>
<div class="boxs2">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="boxs">
<div class="box first"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
如果将鼠标放在正方体上，会有一个面开门，会看见一个淡绿色的正方体在里面转。
最后
敬请期待！
标签：box,translateZ,nth,transform,旋转,rotateY,html,立方体,type From： https://blog.csdn.net/2401_82944012/article/details/140224084