版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012468376/article/details/60865911
css3包括两种转换，2D转换和3D转换。
css3的转换允许我们对元素进行旋转、缩放、移动或倾斜。
不管2D转换还是3D转换都是操作的同一个的属性：transform
1.1 2D转换
有四种转换：rotate、scale、translate、skew
1.1.1 translate
在x和y方向平移元素:
transform: translate(500px, 0px);
说明：
参数可以是像素或百分比。
参数1：沿x方向的平移，正表示向右移动
参数2：沿y方向的平移，正表示向下移动
如果是百分比是相对于自己的宽高的百分比。
<!DOCTYPE html<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> div{ width: 200px; height: 200px; background-color: pink; }
div:nth-of-type(2){ background-color: gray; transform: translate(500px, 0px); }
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
css
如果仅仅沿x或y某一个方向运动，也可以使用：
transform:translateX(200px);
或
transform:translateY(200px);
1.1.2 rotate
旋转元素， 是指有沿着 z 轴旋转。(就是垂直于屏幕的轴）
transform:rotate(10deg);
参数必须是度数。大于0表示顺时针旋转的度数，小于0表示逆时针旋转的角度。
注意：
旋转的时候默认是以元素的几何中心作为轴来旋转的。
可以使用 transform-origin: offsetX offsetY;来设置旋转的时候的轴的位置.
transform-origin: 0 0;
1.1.3 scale
对元素进行放大。
transform: scale(倍数);
注意：
倍数大于表示放大，小于1表示缩小。不需要带单位
默认是元素中心作为放大或缩小的参考点
transform: scale(.5);
transform-origin: 0 0;transform: scale(.5);
1.1..4 skew
skew是倾斜（斜切）。让元素与x方向或y方向产生倾斜。
transform: skew(40deg,10deg);
参数1：x方向的倾斜度数
参数2：y方向的倾斜度数
transform-origin: 0 0;transform: skew(40deg,10deg);
1.2 3D转换
想对2D转换来说，3D转换浏览器支持的不太好。不过在移动端可以放心的使用。
3D坐标系：
默认情况水平向右为x轴正方形、垂直向下为y轴正方形、垂直于屏幕向外的为z轴正方形
1.2.1 perspective属性
perspective（透视）是transform变形3D中最重要的内容。如果不设置透视，元素的3D变形效果将无法实现，所有的变化都会被投影到2D的区域展示。
可以简单理解为 视距，用来设置用户和元素 3D 空间 Z 平面之间的距离。而其效应由他的值来决定，值越小，用户与 3D 空间 Z 平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就越小。
要把它用在父容器中。
1.2.2 translate3d(x,y,z)
translate3D(x,y,z) 可以在x,y,z三个方向移动。
translateZ(z) 只在z轴平移
1.2.3 rotate3d(x, y, z, a)
3d旋转。 分别表示绕着x，y，z旋转。 参数中的x，y，z是一个数值。a是一个角度。
如果a是正值表示顺时针旋转， 如果a是负值表示逆时针旋转。
x,y,z表示方向矢量，xyz的平方和如果是1的话就是标准矢量，如果不是1就会转换成一个标准矢量。x,y,z分别分别除以他们的平方和得到的值就是标准矢量。 这三个值决定了将来要旋转的时候的坐标轴。
注意：判断是顺时针还是逆时针，让逆着坐标轴的正放下观察的。
可以使用rotateX、rotateY、rotateZ表示沿着某个轴的旋转
rotateX(40deg) 等同于 rotate3d(1,0,0,40deg)
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style> .outer, .inner { margin: 100px auto; width: 400px; height: 400px; background-color: gray; } .outer { perspective: 300px; } .inner { background-color: pink; transform: rotateX(45deg); } </style></head><body><div class="outer">
<div class="inner"></div></div></body></html>
1.2.4 scale3d(sx, sy, sz)
参数分别表示沿着向相应的坐标轴的缩放。注意sz其实是缩放的translateZ的值，如果没有设置translateZ则sz的值无效的。
scaleX、scaleY、scaleZ分别表示x，y，z方向的缩放。
表示他的子元素在变形的时候，是在一个2d平面内变形，还是在一个3d平面内变形。
两个值：flat和preserve-3d
flat：变形仍然在2d空间
preserve-3d：3d空间内变形
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style> .outer, .inner { margin: 300px auto; width: 400px; height: 400px; background-color: gray; } .outer { transform:rotateY(45deg); transform-style: preserve-3d; } .inner { background-color: pink; transform:rotateX(60deg); } </style></head><body><div class="outer">
<div class="inner"></div></div></body></html>
1.3 正方体案例
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 400px;height: 400px;text-align: center;line-height: 400px;font-size: 60px;}
.container{position: relative;border: 1px dashed #000;margin: 200px auto;
transform: rotateY(30deg) rotateX(30deg);
transform-style: preserve-3d;animation: 10s linear 0s infinite reverse my_rotate;}
.container div{position: absolute;}
.font{background-color: rgba(100, 100, 100, 1);transform: translateZ(200px);}
.back{background-color: rgba(80, 255, 133, 1);transform: rotateY(180deg) translateZ(200px);}
.left{background-color: rgba(255, 57, 56, 1);transform: rotateY(-90deg) translateZ(200px);}
.right{background-color: rgba(25, 37, 170, 1);transform: rotateY(90deg) translateZ(200px);}
.up{background-color: rgba(232, 255, 204, 1);transform: rotateX(90deg) translateZ(200px);}
.down{background-color: rgba(94, 255, 56, 1);transform: rotateX(-90deg) translateZ(200px);}
@keyframes my_rotate {from{transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);}
to{transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg); }
} </style></head><body><div class="container">
<div class="font">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="up">上</div>
<div class="down">下</div></div></body></html>
