2018.12.06

十五、CSS变形转换
属性：transform
1.Translate----位移
概念
该属性值可以让元素从当前位置根据X轴Y轴，在水平和垂直方向进行移动。

注意：

在浏览器中一般只要说到x,y轴，那么基本是都是以下面方式计算原点和方向
原点： 元素或者窗体的左上角
x轴正方向：元素或者窗体的右边
y轴正方向：元素或者窗体的下边
用法
只要给当前元素的css属性transform设置值为translate就可以实现位移了。
实例一：设置元素在X轴的位移
写法：transform：translateX( x轴距离)

实例二：设置元素在Y轴的位移
写法：transform：translateY( y轴距离)

实例三：同时设置元素在X轴与Y轴的位移
写法：transform：translate( x轴距离, y轴距离)
可以写两个值分别设置在x,y轴上的距离，也可以只写一个值同时设置x,y轴上的距离。
设置正值

设置负值

注意事项
1.当translate只给一个值时，就等效于translateX（x轴距离）
2.使用translateX与translateY时，xy大小写皆可。
3.他的移动与相对定位有点相似，在进行移动后，自身的位置仍然保留，同时新位置处若有其他元素那么他会浮动到其他元素之上，而不会影响到其它元素的位置。
4.translate可以作用于已经执行了定位的元素。（不管是绝对定位还是相对定位又或者是浮动定位）
5.使用“translate”可以让 GPU 参与运算，动画的 FPS（每秒传输帧数）更高，更加流畅。

2.Scale----缩放
概念
1.该属性值会让元素以当前元素的中心进行缩放，参数的值就是缩放比例，为一个整数或浮点数。（也可以给负数，但是意义不大）
2.默认为1，不进行缩放，“0.8”表示缩小为原来的80%，“1.5”表示扩大到原来的150%，参数不需要单位。
写法
和位移的写法一致
1.transform：scaleX( 沿x轴缩放比例) “scaleX”设置元素在X轴方向的缩放
2.transform：scaleY( 沿y轴缩放比例 ) “scaleY”设置元素在Y轴方向的缩放
3.transform：scale( x比例，y比例) “scale”可以同时设置元素在X轴和Y轴方向的缩放，参数间用逗号“,”进行分隔。
如果scale只给一个值，表示X,Y轴同时缩放，这点和位移不一样。

注意
1.scaleX和scaleY中，xy大小写均可。
2.缩放是在原位置上进行，但是不会挤压周围元素，缩放超出的大小会浮动在周围元素之上。（位移，缩放，旋转都是如此）
3.Skew----倾斜
概念
该属性值会让元素根据水平（X轴）和垂直（Y轴）线参数设定倾斜角度。
写法
1.transform：skewX( x轴倾斜度) “skewX”用于控制元素在水平x轴方向的倾斜
2.：transform：skewY( y轴倾斜度) “skewY”用于控制元素在垂直y轴方向的倾斜
3.：transform：skew( x轴倾斜度，y轴倾斜度) “skew”有两个参数（一个参数相当于“skewX”，和位移一样），分别控制元素在水平和垂直轴方向的倾斜，参数间用逗号“,”进行分隔
注意事项
1.使用skewX与skewY时，xy大小写皆可。
2.倾斜的原点为元素中心位置，
3.如果设置了沿x轴倾斜，那么倾斜的两根线就应该是两根竖线，如果设置了沿y轴倾斜，那么倾斜的两根线就应该是两根横线，
4.度数为正数时，倾斜的轴是朝左（y轴动），朝上（x轴动）进行倾斜的。【这个我们可以看左上角的变化来决定】
实例
1.skewX(30deg) 使元素在x轴方向倾斜30度；

2.skewY(10deg) 使元素在y轴方向倾斜10度；

3、skew(30deg,10deg) 使元素沿X轴倾斜30度，沿y轴倾斜10度。

4.rotate-----旋转
概念
1.该属性值默认会让元素以当前元素的中心(X=width/2，Y=height/2) 进行旋转。
2.旋转的角度为参数所设定的值，“正数”是顺时针方向旋转，“负数”是逆时针方向旋转，单位为“deg”(角度)。

用法
只要给当前元素的css属性transform设置值为rotate就可以实现旋转了。
实例一：设置元素沿着水平的X轴进行旋转
写法：transform：rotateX( 旋转度数)

实例二：设置元素沿着垂直的Y轴进行旋转
写法：transform：rotateY( 旋转度数)

实例三：设置元素沿着垂直于xy所在平面的的Z轴进行旋转
写法：transform：rotateZ( 旋转度数)

注意：rotateZ也可直接写作rotate

5.transform组合值
如果给出组合值，那么就会按照先后顺序进行转换。
练习：请通过组合值实现金箍棒翻转的效果
6.transform-origin — 变换原点
该属性用于设置变形转换元素【缩放，旋转，倾斜, 位移（两个中心位置的距离）】的原点位置，默认为元素的中心位置，即除了位移无法使用外，其他的变换都可使用。
3种值类型如下：
方位英文单词
有“top”、“right”、“bottom”、“left”和“center”5个值可以使用，如：
“top left”表示左上角，
“right bottom”表示右下角，
“center center”表示默认的中点。
Web常用长度单位
如最常用的像素“px”，字符“em”，点“rem”等，如：
“16px 20px”表示旋转的轴在“X轴”的16像素，“Y轴（向下为正，向上为负）”的20像素的位置。
百分数
第一个百分数表示相对于元素宽度的百分比位置，第二个百分数表示相对于元素高度的百分比位置，如：
“0% 0%”相当于左上角，
“50% 50%”相当于默认的中点，
“100% 100%”相当于元素的右下角。
7.transform-style – 3D嵌套样式
transform-style属性规定如何在3D空间中呈现被嵌套的子元素（即：设置到祖先级元素上，如父级。然后对后代元素起效）
它主要有两个值：
flat表示所有子元素在2D平面呈现。
当值为“flat”的时候，就相当于在纸上画画，无论画功再好，画出的东西都是平面的，只是由于透视和明暗关系，有的时候看起来“很立体”罢了。

preserve-3d表示所有子元素在3D空间中呈现。
当“transform-style”的值为“preserve-3D”时更贴近我们现实中的思维，因为平时我们眼睛所看到的东西都是“3D（立体）”的，
注意：这种3d效果是无法穿透body的
可以穿透div 可以穿透section 无法穿透body

代码实例：

8.perspective — 3D元素距视图的距离
定义3D元素距视图的距离，对转换为了3D模式的元素（加上了transform-style属性为3d）效果更好，单位为px，rem…皆可。
其值为宽高的3-5倍比较合适，当然并不绝对。
一般值越大，距离越远，看起来就越不清晰，但能看完整体。
一般值越小，距离越近，看起来就越清晰，但很可能无法看完整体。
注意：现在此元素需要使用浏览器内核前缀以兼容使用，否则不一定有效 如： -webkit-perspective:20rem; 然后也是写在祖先上，作用到后代上。

基本使用示例：

基本代码如下

section {
margin: 200px;
background: red;
}
.parent-div {
width: 30rem;
height: 30rem;
background: rebeccapurple;
}
.parent-div div {
width: 10rem;
height: 10rem;
opacity: 0.9;
background: rgb(120, 110, 129);
}

/* 让最里面的div进行3d变换 /
.parent-div:hover div {
transform: rotateY(30deg);
}
/ 让外层div进行3d变换 /
/ .parent-div:hover {
transform: rotateX(30deg) rotateY(30deg);
} */

你好

9.perspective-origin – 定义3D元素透视原点
定义3D元素透视原点（代表了用户从什么角度看过去，比如坐下还是右上等），默认值是“50% 50%”或“center center”，表示3D元素透视的位置是以子元素的“中心”开始的
注意：现在此元素需要使用浏览器内核前缀以兼容使用，否则不一定有效 如： -webkit-perspective-origin:right bottom;

然后此属性同样是设置到祖先级元素上，使其后代元素起效。

代码：

section {
margin: 200px;
background: red;
}
.parent-div {
width: 30rem;
height: 30rem;
background: rebeccapurple;
}
.parent-div div {
width: 10rem;
height: 10rem;
opacity: 0.9;
background: rgb(120, 110, 129);
}
/* 让最里面的div进行3d变换 /
.parent-div:hover div {
transform: rotateY(30deg);
}
/ 让外层div进行3d变换 /
/ .parent-div:hover {
transform: rotateX(30deg) rotateY(30deg);
} */

你好

10.backface-visibility — 3D翻转背面可见性
该属性定义当3D元素不面向屏幕时是否可见，该属性有两个值：
visible（默认）
表示当3D元素通过“rotate”属性旋转到元素“背部”时，元素仍然可见。
hidden
表示当3D元素通过“rotate”属性旋转到元素“背部”时，元素不可见。