2016-04-10

CSS3变形

CSS3变形主要指transform属性，分为2D和3D

transform2D

transform:rotate(deg) scale(x,y) skew(x,y) translate(x,y);

transform:rotate()旋转

通过指定的角度参数对原元素制定一个2D旋转，deg(角度,单位)可为负数

transform:scale(x,y)缩放

scale(x,y)元素水平方向和垂直方向同时缩放
scaleX(x)元素仅水平方向缩放
scaleY(y)元素仅垂直方向缩放
x,y可以为整数小数

transform:skew(x,y)扭曲

skew(x,y)元素水平和垂直方向同时扭曲变形
skewX(x)元素仅水平方向扭曲变形
skewY(y)元素仅垂直方向扭曲变形
x,y单位为deg(角度)

transform:translate(x,y)偏移

translate(x,y)元素水平方向和垂直方向同时移动
translateX(x)元素仅水平方向移动
translateY(y)元素仅垂直方向移动
x,y可以为负数

示例如下：

    <style>
        .translate2d{
            display:block;
            width:200px;
            height:200px;
            background-color:aqua;
            transition:all 4s;
            transform:rotate(0) scale(1,1) skew(0deg,0deg) translate(0px);
        }
        .translate2d:hover{
            background:lime url("http://tupian.sucaitianxia.com/images/008/pic7884.jpg") 0 0 no-repeat;
            background-size:100%;
            transform:rotate(710deg) scale(2,2) skew(10deg,10deg) translate(200px,0px);
        }
    </style>
    <a class="translate2d" href="https://liuxiaomengzy.github.io/"></a>

鼠标滑过观察效果：

transform3D

transform-style:flat(默认)/preserve-3d

flat默认属性，所有子元素在2D平面呈现

preserve-3d，所有子元素在3D平面呈现，设置这个属性之后，就不能设置overflow:hidden（可以认为是舞台）。

transform-origin(X,Y,Z)

元素的基点位置，默认基点是元素中心位置。

transform-origin(X,Y,Z)，其中X和Y的值可以是百分比、em、px等，Z必须为px、em等具体值，因其默认空间无限大，不可百分比为单位。

transform:rotateZ()

rotateX()元素围绕X轴以给定的度数进行旋转
rotateY()元素围绕Y轴以给定的度数进行旋转
rotateZ()元素围绕Z轴以给定的度数进行旋转
默认沿着逆时针方向旋转

perspective视距/视角

设置查看者的位置，单位为px。指元素距离视图的距离（可想象为电影院座位）。

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

ex: transform:perspective(600px) rotateY(45deg);

perspective-origin视角中心

perspective-origin:X Y Z;X，Y可以设置px、百分比，Z不可设置百分比。

主要与perspective一同使用，用来改变 3D 元素的底部位置。

transform:translateZ()偏移

translateZ(z)元素沿Z轴方向移动，z可以为负数

backface-visibility

backface-visibility:visible||hidden，元素旋转背面是否可见。

visible可见 || hidden隐藏

示例如下(因设置需要对div设置了hover效果，正常代码不建议使用)：

    <style>
        div.p3d{
            perspective:500px;
            perspective-origin:50% 50% 100px;
        }
        div.space{
            width:200px;
            height:200px;
            margin:0 auto;
            position:relative;
            transform-style:preserve-3d;
            transition:all 3s;
            transform-origin:50% 50% 100px;
            transform:rotate3d(0,0,0,0deg);
        }
        div.space:hover{
            transform:rotate3d(1,1,1,360deg);
        }
        div.cube{
            position:absolute;
            width:200px;
            height:200px;
            text-align:center;
            line-height:200px;
            font-size:50px;
            color:white;
            top:0;
            left:0;
            opacity:0.6;
            backface-visibility:visible;
        }
        div.square1{
            transform-origin:0 50%;
            transform:rotateY(-90deg);
            background:maroon;
        }
        div.square2{
            transform-origin:50% 0;
            transform:rotateX(90deg);
            background:green;
        }
        div.square3{
            transform-origin:100% 50%;
            transform:rotateY(90deg);
            background:lime;
        }
        div.square4{
            transform-origin:50% 100%;
            transform:rotateX(-90deg);
            background:fuchsia;
        }
        div.square5{
            transform:translateZ(200px);
            background:blue;
        }
        div.square6{
            background:aqua;
        }
    </style>
    <div class="p3d">
        <div class="space">
            <div class="cube square1">一</div>
            <div class="cube square2">二</div>
            <div class="cube square3">三</div>
            <div class="cube square4">四</div>
            <div class="cube square5">五</div>
            <div class="cube square6">六</div>
        </div>
    </div>

紫--小梦

心怀梦想，志在远方。