平凡前端之路_12.CSS3变形

CSS3 变形（transform）特性支持在 2D 或者 3D 空间里操作网页对象的位置和形状，例如旋转、扭曲、缩放或者移位。

设置变形的基点位置 - transform-origin

使用 CSS3 transform-origin属性指定变形的基点位置。

transform-origin可能的值	描述
center（默认）	指定变形的基点位于X轴/Y轴的中心点。
left	指定变形的基点位于X轴的左端点。
right	指定变形的基点位于X轴的右端点。
top	指定变形的基点位于Y轴的上端点。
bottom	指定变形的基点位于y轴的下端点。
length	指定变形的基点位于X轴/Y轴/Z轴的指定长度处。
%	指定变形的基点位X轴/Y轴的百分比处。

/** transform-origin 属性可以指定所有三个坐标轴基点位置*/
transform-origin: [x-axis] [y-axis] [z-axis];

eg：
    transform-origin: left;     /** 等价于transform-origin: left center 0; */
    transform-origin: top;      /** 等价于transform-origin: center top 0; */
    transform-origin: top left; /** 等价于transform-origin: left top 0;*/
   

---

设置变形的类型 - transform-style

使用 CSS3 transform–style属性指定变形的类型。

transform-style可能的值	描述
flat（默认）	2d变形
preserve-3d	3d变形

3D 变形

设置3d景深效果及距离 - perspective

perspective 属性指定了观察者与z=0平面的纵深距离，使具有3d景深效果。

当为元素定义 perspective 属性时，其子元素会获得3D透视效果，而不是元素本身。

perspective可能的值	描述
none (默认)	表示在无限的距离来观察 3D元素视图。
number [-webkit-]	表示在指定的距离来观察 3D元素视图，接受一个大于 0 的值。以像素计。
length [标准]	表示在指定的距离来观察 3D元素视图，接受一个长度单位大于 0 的值。

eg: 
    -webkit-perspective: 500; /* Safari 和 Chrome */
            perspective: 500px;

设置3d景深效果的消失点- perspective-origin

perspective-origin 属性指定3d景深效果的消失点。

当为元素定义 perspective-origin 属性时，其子元素会获得3D透视效果，而不是元素本身。

perspective-origin可能的值	描述
center（默认）	指定消失点位于X轴/Y轴的中心点。
left	指定消失点位于X轴的左端点。
right	指消失点位于X轴的右端点。
top	指定消失点位于Y轴的上端点。
bottom	指定消失点位于y轴的下端点。
length	指定消失点位于X轴/Y轴/Z轴的指定长度处。
%	指定消失点位X轴/Y轴的百分比处。

-webkit-perspective: [x-axis] [y-axis];
        perspective-origin: [x-axis] [y-axis];
eg：
    perspective-origin: left;     /** perspective-origin: left center; */
    perspective-origin: top;      /** perspective-origin: center top; */
    perspective-origin: top left; /** perspective-origin: left top;*/
   

---

设置元素背面是否可见 - backface-visibilitys

backface-visibilitys属性定义当元素不面向屏幕时是否可见。

backface-visibilitys可能的值	描述
visible	背面是可见的。
hidden	背面是不可见的。

eg:
    
 -webkit-backface-visibility: hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility: hidden; 	/* Firefox */
     -ms-backface-visibility: hidden; 	/* Internet Explorer */
         backface-visibility: hidden;

旋转 - rotate / rotate3d

使用 CSS3 rotate / rotate3d指定基于基点在坐标轴上旋转。

属性	描述
rotateX	基于基点在X轴方向旋转。
rotateY	基于基点在Y轴方向旋转。
rotateZ（默认）	基于基点在Z轴方向旋转。

/** 
    rotate 属性是基于指定基点在Z轴旋转
    rotate3d 属性是基于指定基点在三个坐标轴的旋转 
*/
transform: rotate([rotateZ]);
transform: rotate3d([rotateX],[rotateY],[rotateZ]);

rotate & rotateX & rotateY & rotateZ可能的值	描述
angle	旋转的角度。

eg:
    transform: rotateX(45deg); /** 45deg == 50grad == 0.25turn */
    
    transform: rotate(45deg); 
     /** 等价于*/
    transform: rotateZ(45deg);

---

扭曲 - skew

使用 CSS3 skew指定 基于基点扭曲坐标轴。

属性	描述
skewX	基于Y轴基点扭曲X坐标轴。
skewY	基于X轴基点扭曲Y坐标轴。

skew & skewX & skewY 可能的值	描述
0（默认）	不扭曲。
angle	扭曲的角度。

transform: skew([skewX], [skewY])
eg:
    transform: skew(45deg);  
     /** 等价于*/
    transform: skew(45deg, 0); 
     /** 等价于*/
    transform: skewX(45deg) skewY(0);

---

缩放 - scale / scale3d

使用 CSS3 scale / scale3d指基于基点在坐标轴方向上缩放。

属性	描述
scaleX	基于基点在X轴方向缩放。
scaleY	基于基点在Y轴方向缩放。
scaleZ	基于基点在Z轴方向缩放。

/** 
    scale 属性是基于指定基点在X轴和Y轴的缩放
    scale3d 属性是基于指定基点在三个坐标轴的缩放 
*/
transform: scale([scaleX],[scaleY] );
transform: scale3d([scaleX],[scaleY],[scaleZ]);

scale & scaleX & scaleY & scaleZ 可能的值	描述
number	缩放的大小。1表示不缩小放大。

eg: 
    transform: scale(0.8); 
     /** 等价于*/
    transform: scale(0.8, 0.8);
     /** 等价于*/
    transform: scaleX(0.8) scaleY(0.8);
    

---

位移 - translate / translate3d

使用 CSS3 translate / translate3d指基于基点在坐标轴方向上位移。

属性	描述
translateX	基于基点在X轴方向位移。
translateY	基于基点在Y轴方向位移。
translateZ	基于基点在Z轴方向位移。

/** 
    translate 属性是基于指定基点在X轴和Y轴的位移
    translate3d 属性是基于指定基点在三个坐标轴的位移 
*/
transform: translate([translateX],[translateY] );
transform: translate3d([translateX],[translateY],[translateZ]);

translate& translateX & translateY & translateZ 可能的值	描述
0（默认）	不位移。
length	位移的长度。
%	位移的百分比。

eg: 
    transform: translate(100px); 
    /** 等价于*/
    transform: translate(100px, 0);
    /** 等价于*/
    transform: translateX(100px) translateY(0);

---

CSS 知识题

问题	答案
选择列表除第一个外的元素	ul li:not(:first-child)	[1,n]
选择列表前1个元素	ul li:nth-child(-n+1) / ul li:first-child	[0]
选择列表前3个元素	ul li:nth-child(-n+3)	[0,3]
选择列表除前3个外的元素	ul li:nth-child(n+3)	[3,n]
选择5-10的子元素	E:nth-child(n+5):nth-child(-n+10)	[5,10]
选择列表后4个元素	nth-last-child(-n+4)	[n-4,n]
选择列表除后4个外的元素	nth-last-child(n+4)	[0,n-4]
选择列表除最后一个外的元素	ul li:not(:last-child)	[0,n-1]