倒影
-webkit-box-reflect:left|right|above|below 5px;
属性值1：位置，属性值2：间距。
倒影+渐变
-webkit-box-reflect: left 5px -webkit-linear-gradient(top,rgba(0,0,0,0)20%,rgba(0,0,0,0.6));
变形transform
transform 属性向元素应用 2D 或 3D 转换
该属性允许我们对元素进行旋转、扭曲、缩放或移动：
rotate(angle)旋转 skew(x-angle,y-angle)扭曲(倾斜) scale(x,y)缩放 translate(x,y)移动
-
transform:rotate();
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
rotate3d(x,y,z,angle) 定义 3D 旋转。
-webkit-transform:rotate3d(1,0,1,30deg);
x , y , z 需要沿着该轴转动就将该轴的值设置为1，否则为0后面的angle中设置旋转的角度，只有一个角度值 -
transform:translate();
translate(x,y) 定义 2D 移动。
translate3d(x,y,z) 定义 3D 移动。
translateX(length) 定义对象X轴的平移
translateY(length) 定义对象Y轴的平移
translateZ(length) 定义对象3D 移动Z轴的平移
-webkit-transform:translate(50px,50px);
-webkit-transform: translate3d(50px,50px,50px); -
transform:scale();
scale(x,y) 定义 2D 缩放转换
scale3d(x,y,z) 定义 3D 缩放转换
scaleX(number) 通过设置 X 轴的值来定义缩放转换
scaleY(number) 通过设置 Y 轴的值来定义缩放转换
scaleZ(number) 通过设置 Z 轴的值来定义 3D 缩放转换-webkit-transform:scale(3,2);
-webkit-transform:scaleX(2) scaleY(1.5);
-webkit-transform:scale3d(2,1,3); -
transform:skew();
skew(x , y) 定义沿着 X 和 Y 轴的 2D 扭曲转换
skewX(angle) 定义沿着 X 轴的 2D 扭曲转换
skewY(angle) 定义沿着 Y 轴的 2D 扭曲转换-webkit-transform:skew(30deg,10deg);
-webkit-transform:skewX(30deg) skewY(10deg); -
transform:matrix()
matrix(number,number,number,number,number,number)： 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
[a,b,c,d,e,f]变换矩阵总结
浏览器在处理时是将所有的效果全部转换为matrix执行1,4两个位置（a，d）用来控制缩放
2,3两个位置（b，c）用来控制扭曲（倾斜）
5,6两个位置（e，f）用来控制移动1,2,3,4两个位置（a，b，c，d）用来控制"形状"
5,6这个位置（e , f）用来控制移动-webkit-transform:matrix( 1 , 0 , -1 , 1 , 10 , 20 ) ;
-
transform-origin 属性允许改变被转换元素的参考位置(中心点)
transform-origin: x y z ;
X：定义视图被置于 X 轴的何处, 值：length | left | center | right | %
Y：定义视图被置于 Y 轴的何处, 值：length | top | center | bottom | %
Z：定义视图被置于 Z 轴的何处, 值：length
2D 转换元素能够改变元素 x 和 y 轴
3D 转换元素还能改变其 Z 轴
transform-origin:50px 50px; transform-origin:left top;
变形3D效果
-
transform-style:该属性是3D空间一个重要属性，指定父元素的子元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d
transform-style: flat | preserve-3d
其中flat值为默认值，表示所有子元素在2D平面呈现，preserve-3d表示所有子元素在3D空间中呈现
-
perspective 属性定义 3D 元素距视角点的距离，以像素计当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
perspective: number | none; 默认值: none
number--元素距离视图的距离，以像素计
-
perspective-origin 属性设置 3D 元素的视角点位置
语法: perspective-origin: x y;
x--默认值：center（50%）; y--默认值：center（50%）;
top | bottom | left | right | center | length | %
