CSS3 制作立方体（个人疑惑点解读）
Posted htmllym
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 制作立方体（个人疑惑点解读）相关的知识，希望对你有一定的参考价值。
<!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轴线，通过控制与这些轴线的距离和关于轴线的旋转来达到不同的立体效果。
以上是关于CSS3 制作立方体（个人疑惑点解读）的主要内容，如果未能解决你的问题，请参考以下文章