css3倒影，变形

一、CSS3 倒影。

简单倒影

1).-webkit-box-reflect: left
    属性值1：位置
    [above , below , left , right]
2).-webkit-box-reflect: left 5px
    属性值2：间距
    像素值
3).-webkit-box-reflect: left 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6));
    属性值3：渐变

4).注：渐变中的颜色对倒影没有影响；渐变中的透明度影响倒影透明度。

二、CSS3 变形。

1).transform--变形

目前 IE9及以上、Firefox、Opera、Safari 和 Chrome 等主流浏览器都支持transform属性2D转换。

2).transform-style:该属性是3D空间一个重要属性，指定父元素的子元素如何在3D空间中呈现。

他主要有两个属性值：flat和preserve-3d。
transform-style属性的使用语法非常简单：
transform-style: flat | preserve-3d
其中flat值为默认值，表示所有子元素在2D平面呈现，preserve-3d表示所有子元素在3D空间中呈现，例如：-webkit-transform-style: preserve-3d;

注意：此属性写在子元素需要3D效果的父元素样式表上。

3).3D效果视角

perspective 属性定义 3D 元素距视角点的距离，以像素计
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
perspective: number | none; 默认值: none
number--元素距离视图的距离，以像素计
perspective-origin 属性设置 3D 元素的视角点位置
语法: perspective-origin: x y;
x--默认值：center（50%）; y--默认值：center（50%）;

4).变形旋转
* （1）transform:rotate();
    rotate(angle) 定义 2D 旋转，在参数中规定角度。
    rotate3d(x,y,z,angle) 定义 3D 旋转。
    rotateX(angle) 定义沿着 X 轴的 3D 旋转。
    rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
    2D 旋转实例：#mydiv { transform:rotate(20deg); }
    “deg”是“度”-----“20deg”表示“20度”

* （2）rotate3d(x,y,z,angle) 定义 3D 旋转
    3D 旋转实例1：
        .mydiv { -webkit-transform:rotate3d(1,0,1,30deg); }
x , y , z 需要沿着该轴转动就将该轴的值设置为1，否则为0

后面的angle中设置旋转的角度，只有一个角度值

    3D 旋转实例2：
.mydiv { -webkit-transform:rotateX(50deg) rotateY(50deg rotateZ(20deg); }

* （3）变形性参考位置
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;

* （4）变形-移动
    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);

* （5）变形-缩放
    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);

* （6）变形-扭曲（倾斜）
    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);

* （7）变形-矩阵 transform:matrix();
    （1）matrix(number,number,number,number,number,number)：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
    （2）[a,b,c,d,e,f]变换矩阵总结
        CSS3的全部变形效果均能够使用矩阵来实现
        浏览器在处理时是将所有的效果全部转换为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 ) ;

猜你喜欢