旋转的立方体

单词

前：front 前端：front
后: back
左：left
右：right
顶:top
底：bottom

如何让一个div水平垂直居中

方法1.使用定位 + translate() | calc()
方法2：弹性盒模型
方法3：外边距自动获取
方法4：网格

1.tranform属性

translate()

定义：移动变换
语法：

translate()
translate3d()
translateX()
translateY()
translateZ()

属性值

• 单位： 属性型是任意长度值：px | % | em | rem | vh | vw
  - translate(50%) /无效 因为div没有厚度/
• 数量： 属性值数量由函数确定：1 - 3个
• 数量： 多个属性值，使用逗号隔开
• 方向：
  - X：正值向右 负值向左
  - Y：正值向下 负值向上
  - Z：正值向前 负值向后
• 等价：translate(200px)等价于translateX(200px)

scale()函数

定义：用于对元素进行缩放变换。
语法

scale()
scale3d()
scaleX()
scaleY()
scaleZ()

参数值

• 数量：由函数决定：1-3个属性值
• 类型：没有单位的数值。数值表示缩放系数。
• 范围：[-1,1]和[1,正无穷]
  - 1：无效果
  - -0.5等于0.5
  - 0.5表示缩小一半。
  - 2.表示放大2倍。
• 等价：scale(2)效果同 scaleX(2)

rotate()
定义：用于对元素进行旋转变换。
语法

rotate()
rotate3d(1,1,1,45deg)
rotateX()
rotateY()
rotateZ()

属性值

• 等价：rotate(30deg)效果同rotateX(30deg)
• 30deg：属性值是角度值。deg表示角度单位。
• 数量：由函数决定。1-4个
• Rotate3d(x,y,z,deg)：x,y,z分别代表水平、垂直、纵轴的旋转方向，取值范围0-1。

skew()

定义：用于对元素进行斜切转换
用法：

skew()
skewX()
skewY()

参数

• 参数是角度值。deg表示角度单位
  - 正值向左
  - 负值向右
• 参数数量由函数决定：1-2

transform-origin

定义：用于设置元素的变换中心点。
语法

transform-origin: x y z;
transform-origin: x y ;
transform-origin: x;

属性值
默认值：transform-origin: center center
三个值
x：可以是任意长度值 | 关键词。表示x轴的偏移
y：可以是任意长度值 | 关键词。表示y轴的偏移
z：可以是任意长度值 | 关键词。表示z轴的偏移

两个值

• 如果只设一个值，那么第二个值默认为center

transform-style

定义：用于设置父元素是2d还是3d模式。
语法

transform-style: flat;
transform-style: preverse-3d;

属性值

• Flat: 开启2d平面空间
• preverse-3d: 开启3d空间

perspective

定义：是否开启透视 | 是否设置景深 | 解释： perspective指定的是Z轴到原点到屏幕的距离
语法

 perspective: none
 perspective: 长度值

属性值：

• none：不设置景深
• 长度值：任何长度值都可以用来设置景深
• 大景深 小变换：在相同的变换参数下， perspective值越大，变换效果越微弱
• 小景深 大变换：在相同的变换参数下， perspective值越小，变换效果越强烈。

perspective-origin

定义：设置观察者的位置。（设置消失点的位置）
语法

/* One-value syntax */
perspective-origin: x-position;

/* Two-value syntax */
perspective-origin: x-position y-position;

属性值

• 数量
  x-position：表示水平位置
  y-position：表示垂直位置

• 属性值类型
  长度值：px % em rem vh vw

• 关键词：left right center top bottom

  background-image:
  repeating-linear-gradient()
  repeating-radial-gradient()

repeating-conic-gradient

定义：

函数用于创建一个重复的角度渐变。

旋转的立方体步骤

第一步：基础设置

第二步：处理地面，立方体，球三者的位置关系和大小

第三步：创建立方体

第四步：添加动画效果

.scene{
    animation:动画名 2s infite;
}