css3制作旋转立方体

一、首先制作一个立方体需要用到2D和3D一些属性和功能函数:

1、2D和3D位移：transform:translate（）；

​ 水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；

​ 垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty);

​ Z轴位移： translateZ（）；

2、2D和3D旋转：transform:rotate（）；

(1)2D旋转

​ rotateX() ：元素围绕其 X 轴以给定的度数进行旋转

​ rotateY() ：元素围绕其 Y 轴以给定的度数进行旋转

(2)3D旋转

​ rotateX()：函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。

​ rotateY()：函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。

​ rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转。

​ rotate3d(x,y,z,a)(建议取值0或1)

• x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
• y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
• z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
• a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3、过渡的持续时间：transition:10s;

4、变形的基点：transform-origin:值1 值2 ;

​ 值1：水平方向 值2：垂直方向

​ 属性值单位：px % left right top bottom center

5、3D场景：transform-style: preserve-3d;

二、构建立方体

1、搭建立方体六个面，并且实现六个面的位移和旋转，同时添加3D场景和过渡时间，实现3D效果

<1>html

<2>css样式

鼠标划过css样式

<3>>实现鼠标划过旋转效果

2、同时可以在立方体里面加一个小立方体，代码基本上相同

​