CSS3 制作立方体（个人疑惑点解读）
wangjie 2020-02-22
<!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>
*{ margin:0; padding:0;}
ul{ list-style: none;}
#box{ width:300px; height: 300px; border:1px black solid; margin:30px auto;
perspective: 500px;
perspective-origin: right top;
}
#box ul{ width:100px; height:100px; margin:100px; position: relative;
transition: 4s;
transform-style: preserve-3d;
transform-origin: center center -50px;
/* transform:scale3d(.5 , 2 , 4); */
}
#box ul li{ width:100%; height: 100%; position: absolute; left:0; top:0; text-align: center; line-height: 100px; font-size:30px; }
#box ul li:nth-of-type(1){ background:red;}
#box ul li:nth-of-type(2){ background:blue; left:100px;
transform-origin:left; transform:rotateY(90deg);}
#box ul li:nth-of-type(3){ background:green; left:-100px;
transform-origin:right; transform:rotateY(-90deg);
}
#box ul li:nth-of-type(4){ background:hotpink; top:-100px;
transform-origin:bottom; transform:rotateX(90deg);
}
#box ul li:nth-of-type(5){ background:gray; top:100px;
transform-origin:top; transform:rotateX(-90deg);
}
#box ul li:nth-of-type(6){ background:yellow;
transform:translate3d(0,0,-100px) rotateY(180deg);
}
#box:hover ul{ transform:rotateY(360deg);
/* transform:rotate3d(1,1,1,360deg); */
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>立方体
以上是一个立方体的代码，在制作过程中有一个基本的思想：拼接，就是首先要有一个装下六个面立方体的父盒子，然后是父盒子里面对应的六个子盒子，子盒子的六个面通过旋转或是移动形成相应的角度将立方体的形状拼接出来，最后在立方体上添加旋转达到旋转效果。/*逆战*/
刚刚接触的人会有3个疑惑点：
1、父盒子和子盒子的模型混淆，即并不清楚的父盒子里面装的是子盒子拼接出来的立方体，所以属性 transform-style: preserve-3d应当添加给父元素而非子元素；
2、旋转点的定位transform-origin: center center -50px也应当添加给父元素，应为最后旋转的是立方体而非立方体的一个面；
3、 perspective:景深这一属性效果能产生近大远小的视觉效果，也应当是添加给父元素；有些人会有对perspective和transform-style: preserve-3d效果产生混淆，因为觉得都会产生3D的效果，个人观点是这样理解的：perspective是通过类似视觉的近大远小让人产生3D视觉的错落感，然而它实际上还是平面的模型；transform-style: preserve-3d能够真正的产生3D模型让模型里每一个组成部分形成不同方向上的x、y、z轴线，通过控制与这些轴线的距离和关于轴线的旋转来达到不同的立体效果。
相关推荐
oLaoJiang 0喜欢 / 0评论 2020-04-25
YichengGu 0喜欢 / 0评论 2016-03-25
yongjianluo 0喜欢 / 0评论 2016-03-14
rookieliang 0喜欢 / 0评论 2019-07-16
尚衍亮 0喜欢 / 0评论 2019-06-28
DaDomain 0喜欢 / 0评论 2019-06-21
mikean 0喜欢 / 0评论 2008-09-08
opspider 0喜欢 / 0评论 2018-07-18
learnpy 0喜欢 / 0评论 2018-07-02
Pythonjeff远 0喜欢 / 0评论 2018-06-19
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。<input type="text" class="xNum" value="&
zrj0 0喜欢 / 0评论 2016-06-12
TWaver可视化 0喜欢 / 0评论 2016-01-26
学习编程 0喜欢 / 0评论 2018-04-08
邢天的小木屋 0喜欢 / 0评论 2018-04-01
黑白漫文化 0喜欢 / 0评论 2018-01-02
前端开发探路者 0喜欢 / 0评论 2016-11-17