CSS3倒影、渐变

倒影

-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 | %