深入浅出篇 — transform & perspective

一. transform

1. rotate 旋转

• transform : rotate(45deg)
• 注：旋转45度 默认是根据z轴旋转
• transform : rotateY() rotateX()

小结：

1.  transform:rotateX()     沿x轴旋转
    transform:rotateY()     沿y轴旋转
    transform:rotateZ()     沿z轴旋转
2. 旋转：
- x轴默认为元素中心点所在的水平方向上的轴 
- y轴默认为元素中心点所在的竖直方向上的轴 
- z轴默认为元素中心点所在的垂直于页面的轴

• transform-origin : 0 0 ; 变换中心，给谁设参照谁

2. rotate (3D) 3d变换

• transform : rotate3d(x,y,z,angle)

小知识点：

1. rotate3d(x,y,z,angle) 里的x，y，z的比值作为旋转方向，大小不重要，由比值决定
2. 3轴方向问题
- x轴在电脑屏幕水平向右
- y轴在电脑屏幕垂直向下
- z轴垂直电脑方向指向你

3. scale 伸缩变换

• transform:scale(1,1)
• 注：当x，y大于1时是扩张，小于1时是收缩
• transform:scale3d(x,y,z)

小知识点：

1. transform : scale(0.5,0.5) , scale(3,3)      会发生叠加操作，是0.5的3倍，而不是原来尺寸的3倍
2. transform : rotate(-45deg) , scale(2,1)      旋转后会以新生成的x，y轴来进行变换

4. skew 倾斜

• skew(x,y) 填角度 skew( 0deg,0deg )

5. translate

• transform : translate(x,y) 向右平移x像素，向下平移y像素
• 其同样具有3个方向的分写方式

例：

transform : translateX()
transform : translateY()
transform : translateZ()

• transform : translate3d(x,y,z)

二. perspective

1. perspective 景深， 要设置在父级上 他的子元素才会受到影响
2. perspective :800px 设置在父级，只有一双眼睛
3. persepective-origin : center center ;视角中心
4. persepective-origin：100px 100px 100px; 也可作为空间变换中心
5. transform : perspective(800px) 设置在子集，（每个元素都有一双眼睛，即所有元素景深效果都一样）
6. transform-style : preserve-3d 保持3d空间 和景深配合设置

三. 随心记

1. backface-visibility 属性定义当元素不面向屏幕时是否可见

• backface-visibility ： hidden 在3d效果中，背面隐藏
• backface-visibility ： visibility 默认值