1.transform变换

（1）translate（x,y）设置盒子位移
（2）scale（x,y）设置盒子缩放
（3）rotate（deg）设置盒子旋转
（4）skew（x-angle,y-angle）设置盒子斜切
（5）perspective设置透视距离
（6）transform-style flat | preserve-3d 设置盒子是否按3d空间显示
（7）translateX,translateY,translateZ 设置三维移动
（8）rotateX,rotateY,rotateX 设置三维旋转
（9）scaleX，scaleY，scaleZ，设置三维缩放
（10）transform-origin 设置变形的中心点
（11）backface-visibility 设置盒子背面是否可见

<head>
<meta charset="utf-8">
<title>翻页动漫</title>
<style type="text/css">

.box{ width: 600px; height: 250px; border: 1px solid #000; margin: 50px auto; position: relative; transform-style: preserve-3d;}.box img{ position: absolute; left: 300px; top: 0px; transform: perspective(800px) rotateY(0deg); transition: all 500ms ease; backface-visibility: hidden;}.box:hover img{ transform: perspective(800px) rotateY(180deg);}.box .back{ width: 224px; height: 224px; background-color: yellow; position: absolute; left: 300px; text-align: center; line-height: 240px; transform: perspective(800px) rotateY(-180deg); transition: all 500ms ease; /*缓冲运动*/ backface-visibility: hidden;}.box:hover .back{ transform: perspective(800px) rotateY(0deg);}</style>

</head>

<body>

<div class="box"> <img src="/image/路飞1.jpg" alt="路飞"> <div class="back">路飞6666</div></div>

</body>

例子二：旋转

<head>
<meta charset="utf-8">
<title>旋转</title>
<style type="text/css">

.box1,.box2,.box3,.box4,.box5{ width: 100px; height: 100px; margin: 30px; background-color: aquamarine; float: left; transition: all 250ms ease; /*过渡*/}.box1:hover{ transform: rotate(45deg); /*一中心为原点旋转*/}.box2:hover{ transform: rotate(45deg); transform-origin: left center; /*调整中心点*/}.box3:hover{ transform: rotate(45deg); transform-origin: right center;}.box4:hover{ transform: rotate(45deg); transform-origin: top center;}.box5:hover{ transform: rotate(45deg); transform-origin: 50px 50px; /*块为坐标*/}</style>

</head>

<body>

<div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div>

</body>