CSS3 变形

　　CSS3变形是一些效果的集合，比如平移，旋转，缩放和倾斜效果，每个效果都称为变形函数。

transform

　　transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform:none | <transform-function> [<transform-function>] *

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    div{

        width:100px;

        height:100px;

        margin:40px;

        position:absolute;

        opacity:1;

        background:rgb(0, 148, 255);

    }

    .box2{

        background:rgb(0, 148, 255);

        opacity:.5;

		/*旋转45度*/

        transform:rotate(45deg);

    }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

　　旋转

　　缩放

.box2{

	...

	/*放大了1.5倍*/

	transform:scale(1.5);

}

　　位移

.box2{

	...

	/*X轴与Y轴都移动150px*/

	transform:translate(150px,150px);

}

　　倾斜

.box2{

	...

	/*X轴倾斜30度*/

	transform:skew(30deg);

}

transform-origin

　　用来指定元素的中心点位置。

transform-origin:x-axis y-axis z-axis

　　transform进行变形时，默认是以元素自己中心点为原点进行变形的。通过transform-origin属性可以改变元素的中心点，从而以我们指定的点为中心点进行变形。

.box2{

	...

	transform-origin:left top;

}

　　上例中，元素的中心点从默认的中间点center改为左上角点left top。就是说以左上角的点为基点进行变形。很简单吧，其他位置的点俺就不一一示范了，另外transform-origin不能改变translate的中点。

transform-style

　　transform-style属性规定如何在3D空间中呈现被嵌套的元素。

transform-style:flat | preserver-3d

　　简单来说，就是能够创建一个3D空间。让子元素在3D空间中变形。

perspective

　　perspective 属性用来设置用户和元素3D空间Z平面之间的距离。值越小，3D效果越明显。

perspective:none | number

　　当元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D平面中。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    /*没有添加perspective时效果*/

   #box1 div{

        position:absolute;

    }

   #box1 div img{

       transform-origin:bottom;

   }

   #box1 .box1-1 img{

       opacity:.5;

   }

   #box1 .box1-2 img{

       transform:rotateX(45deg);

   }

   /*添加perspective时效果*/

   #box2 div{

        position:absolute;

        left:400px;

        perspective:500px;

    }

   #box2 div img{

       transform-origin:bottom;

   }

   #box2 .box2-1 img{

       opacity:.5;

   }

   #box2 .box2-2 img{

       transform:rotateX(45deg);

   }

</style>

</head>

<body>

<div id="box1">

    <div class="box1-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div>

    <div class="box1-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div>

</div>

<div id="box2">

   <div class="box2-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div>

   <div class="box2-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div>

</div>

</body>

</html>

　　可见，设置了perspective的元素，其3D效果更加明显了。

　　另外，在3D变形中，除了perspective属性可以激活一个3D空间之外，在3D变形的函数中的perspective()也可以激活3D空间。不同的是，perspective属性用在父元素中，perspective()函数用在当前的子元素中，并且与transform中的其他的函数一起使用。如：

transform:rotate(45deg) perspective(500px);

　　其效果是一样的。

perspective-origin

　　用来决定perspective属性的起点位置就，简单说就是观看的视角。

perspective-origin: x-axis y-axis;

　　perspective-origin与perspective属性一样，必须定义在父元素的元素上。换句话说，perspective-origin是与perspective结合使用的。

#box2 div{

	...

	perspective-origin:bottom right;

}

　　右下角效果

　　左下角效果

　　左上角效果

　　右上角效果

　　上角效果

　　右角效果

　　下角效果

　　左角效果

　　默认值，中角。

backface-visibility

　　backface-visibility属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到背面时，该属性很有用。

backface-visibility:visible | hidden;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    @keyframes rotate{

        0%{

            transform:rotateY(0deg);

        }

        100%{

            transform:rotateY(360deg);

        }

    }

   #box1,#box2{

        width:300px;

        height:400px;

        float:left;

        margin:0 20px;

        transform-style: preserve-3d;

        animation:rotate 3s ease-in-out infinite alternate;

   }

   div div {

        perspective: 1000px;

        position:absolute;

        top:0;

        right:0;

        bottom:0;

        left:0;

    }

    #box1 div{

        /*第一个图片背面不可见*/

        backface-visibility: hidden;

    }

   #box1 .box1-1,#box2 .box2-1{

       background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%;

       z-index:2;

   }

   #box1 .box1-2,#box2 .box2-2{

       background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB2cgJ7dVXXXXb3XXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%;

       transform:rotateY(180deg);

   }

</style>

</head>

<body>

<div id="box1">

   <div class="box1-1"></div>

   <div class="box1-2"></div>

</div>

<div id="box2">

    <div class="box2-1"></div>

    <div class="box2-2"></div>

</div>

</body>

</html>

　　两个图片正面时可见并无什么变化

　　两个图片反面时，设置了背面不可见的图片隐藏了正面。

　　将代码复制下来在浏览器中观看，可以更好了解。

CSS3 2D变形

2D位移

　　translate()函数可以把元素从原来的位置移动。

translate(x-axis,y-axis);

　　translate()函数可以取一个值x-axis，也可以取两个值x-axis,y-axis。

　　当取一个值时，x-axis代表X轴移动的距离，正值时元素向右移动，负值向左移动。

　　当取二个值是，x-axis一样；y-axis代表Y轴，正值时元素向下移动，负值向上移动。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    @-webkit-keyframes translate{

        from{

            transform:translate(0);

        }

        20%{

            transform:translate(100px);

        }

        40%{

            transform:translate(100px,100px);

        }

        60%{

            transform:translate(200px,100px);

        }

        80%{

            transform:translate(200px,200px);

        }

        100%{

            transform:translate(300px,200px);

        }

    }

    @keyframes translate{

        from{

            transform:translate(0);

        }

        20%{

            transform:translate(100px);

        }

        40%{

            transform:translate(100px,100px);

        }

        60%{

            transform:translate(200px,100px);

        }

        80%{

            transform:translate(200px,200px);

        }

        100%{

            transform:translate(300px,200px);

        }

    }

    div{

        width:100px;

        height:100px;

        background:hsl(102, 100%, 50%);

        -webkit-animation:translate 1s ease infinite alternate;

        animation:translate 1s ease infinite alternate;

    }

</style>

</head>

<body>

	<div></div>

</body>

</html>

　　下面是两张图片的位移效果，建议将代码复制在浏览器中观看。

　　如果要将对象沿着X轴或者Y轴方向移动，除了可以使用translate(x-axis,0)和translate(0,y-axis)来实现。还可以使用translateX()与translateY()两个函数。

translateX(100px)等于translate(100px,0)

translateY(100px)等于translate(0,100px)

2D缩放

　　缩放函数scale()让元素根据中心原点对元素进行缩放。

scale(x-axis,y-axis);

　　scale()函数与translate()函数的语法相似，可以接受一个值，也可以接受两个值，只有一个值时，第二个值与第一个值一样，也就是说X轴与Y轴成比例缩放。默认值为1，当值小于1时，元素缩小；当值大于1时，元素放大。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    @-webkit-keyframes scale{

        from{

            transform:scale(-3);

        }

        100%{

            transform:scale(5);

        }

    }

    @keyframes scale{

        from{

            transform:scale(-3);

        }

        100%{

            transform:scale(5);

        }

    }

    div{

        position:absolute;

        left:40%;

        top:40%;

        width:70px;

        height:100px;

        background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB24namdVXXXXbXXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 / 100% 100%;

        -webkit-animation:scale 1s ease infinite alternate;

        animation:scale 3s ease infinite alternate;

    }

</style>

</head>

<body>

<div></div>

</body>

</html>

　　scale()函数除了可以取正值，还可以取负值。负值时，会让元素翻转后再进行缩放。下面是两张动画片段，可以复制在浏览器中观看。

　　除了能通过scale()函数使元素在X轴和Y轴进行缩放之外，还可以使用scaleX()与scaleY()两个函数分别在X轴与Y轴缩放。

scaleX(2)相当于scale(2,1)

scaleY(2)相当于scale(1,2)

　　另外，缩放函数默认是以中心点为原点进行变形，可以使用transform-origin函数，修改元素的中心点，使缩放函数的效果不同。

2D倾斜

　　倾斜函数skew()能够让元素倾斜显示。与rotate()函数不同，rotate()函数只能旋转，不能改变元素形状；skew()函数不能旋转，当会改变元素形状。

skew(x-axis,y-axis)

　　x-axis表示元素X轴倾斜的角度。

　　y-axis表示元素Y轴倾斜的角度。

　　与前几个函数一样，当只有一个值时，表示的是X轴进行倾斜；二个值时，X轴与Y轴同时倾斜。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    div {

        width: 100px;

        height: 100px;

        background: hsl(102, 100%, 50%);

        transform:skew(30deg);

    }

</style>

</head>

<body>

<div></div>

</body>

</html>

　　元素X轴倾斜效果

div {

	...

	transform:skew(0,30deg);

}

　　元素Y轴倾斜效果

div {

	...

	transform:skew(30deg,30deg);

}

　　元素X轴与Y轴同时倾斜效果

　　除了使用scale()函数使X轴与Y轴倾斜之外，还可以使用scaleX()与scaleY()函数让元素在X轴与Y轴倾斜。

scaleX(30deg)等于scale(30deg,0)

scaleY(30deg)等于scale(0,30deg)

　　还可以使用transform-origin属性修改元素变形的中心点，让元素有不同的倾斜效果。

2D矩阵

　　俺正在学习当中。点我我也要去学。

CSS3 3D变形

3D位移

　　CSS3中3D位移主要包括两种函数translateZ()和translate3d()。

translateZ(z-axis);

　　功能是让元素在3D空间沿Z轴进行位移。负值时，元素在视觉上感觉越来越远，导致元素变小；正值时，元素在视觉上感觉越来越近，导致元素变大了。代码效果translate3d()函数中。

translate3d(x-axis,y-axis,z-axis);

　　translate3d()函数使一个元素在三维空间移动。是translateX(),translateY(),translateZ()三个函数的缩写，与translate()函数不同的是，translate()函数只能作用在X轴与Y轴上，也就是在二维平面上移动。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    @-webkit-keyframes translate3d {

        0% {

            transform: translate3d(-30px,-20px,-300px);

        }

        100% {

            transform: translate3d(30px,20px,200px);

        }

    }

    @keyframes translate3d {

        0% {

            transform: translate3d(-30px,-20px,-300px);

        }

        100% {

            transform: translate3d(30px,20px,200px);

        }

    }

    body {

        transform-style: preserve-3d;

        perspective: 1000px;

    }

    .box1 {

        position:absolute;

        width: 70px;

        height: 100px;

        background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%;

        -webkit-animation: translate3d 2s ease-in-out infinite alternate;

        animation: translate3d 2s ease-in-out infinite alternate;

        position:absolute;

        top:30px;

        left:20%;

    }

    .box2{

        background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%;

        opacity:.5;

        width: 70px;

        height: 100px;

        position:absolute;

        top:30px;

        left:20%;

    }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

　　下面是两张动画片段,图中可以看出Z轴的移动对视觉上的效果。

3D缩放

　　CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数。

scaleZ(z-axis);

　　让元素在Z轴上按比例缩放。

scale3d(x-axis,y-axis,z-axis);

　　是scaleX，scaleY，scaleZ三个函数的缩写，scaleZ(2)等于scale3d(1,1,2)。与scale函数不同的是，scale()是在二维平面上进行缩放。scale3d()在三维空间上进行缩放。scale3d()与scaleZ()要与其他函数一起使用才有效果。

　　建议在使用transform调用函数时，scale3d()或scaleZ()要写在其他函数之前，不然也没有效果。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    @keyframes scale3d{

        0%{

            transform:scale3d(1,1,-10) rotateX(0);

        }

        100%{

            transform:scale3d(1,1,2) rotateX(40deg);

        }

    }

    html,body{

        transform-style: preserve-3d;

        perspective: 1200px;

    }

    div{

        width: 70px;

        height: 100px;

        position:absolute;

    }

    .box1{

        left:40%;

        top:40px;

        background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;

        z-index:2;

        animation:scale3d 1s ease-in-out infinite alternate;

    }

    .box2{

        left:40%;

        top:40px;

        opacity:.5;

        background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;

    }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

　　下面是动画片段

3D旋转

　　CSS3中3D旋转可以使用rotateX(),rotateY(),rotateZ()三个函数分别设置三维空间的旋转。也可以使用rotate3d()函数集中进行设置，因为效果都是一样的，俺就选rotate3d()函数来说。

rotate3d(x,y,z,deg);

　　x,y,z代表旋转的三个轴，取值是0或1，0时代表这个轴不旋转，1时代表这个轴旋转。deg代表旋转的角度。

rotateX(45deg)等于rotate3d(1,0,0,45deg)

rotateY(45deg)等于rotate3d(0,1,0,45deg)

rotateZ(45deg)等于rotate3d(0,0,1,45deg)

rotateX(45deg);rotateY(45deg);等于rotate3d(1,1,0,45deg)

...

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title></title>

<style>

    @keyframes rotate3d{

        0%{

            transform:rotate3d(0,0,0,0);

        }

        100%{

            transform:rotate3d(1,1,1,45deg);

        }

    }

    html,body{

        transform-style: preserve-3d;

        perspective: 1200px;

    }

    div{

        width: 70px;

        height: 100px;

        position:absolute;

    }

    .box1{

        left:40%;

        top:40px;

        background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;

        z-index:2;

        animation:rotate3d 1s ease-in-out infinite alternate;

    }

    .box2{

        left:40%;

        top:40px;

        opacity:.5;

        background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%;

    }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>