css动画2d，3d旋转平移（附源码）--transform取值顺序不同带来的不同的效果
transform给我们带来了三种常用的特效
2D
1丶平移translate(x, y)
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
2丶缩放 scale(x, y)
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale(n)的n取值默认的值为1，n当值设置为0.01-0.99之间的任何值，使元素缩小；而任何大于1的值，可以让元素放大,负数会对换对角（可以理解成翻转180度，但是设了动画时间可以看到是盒子对角的交换），负号只会反转盒子不会影响盒子大小
<div class="normal">正常的盒子：我在左上靠上</div>
<div class="big">被放大的盒子</div>
<div class="small">被缩小的盒子</div>
<div class="negative">翻转的盒子：我在右下靠下</div>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin-top: 50px;
margin-right: 30px;
}
.big {
transform: scale(1.2);
}
.small{
transform: scale(0.8);
}
.negative {
transform: scale(-1);
}
</style>
3丶旋转 rotate(deg)
transform-origin:x y(x丶y的取值可以是center left bottom right top npx)
3D
网页的坐标系
伸出你的左手
x正方向指向屏幕右边，y正方向指向屏幕下方，z正方向指向你自己
1丶旋转
rotateX(deg)沿着盒子的中心x轴旋转
rotateY(deg)沿着盒子的中心y轴旋转
rotateZ(deg)沿着盒子的中心y轴旋转
顺时针和逆时针
我们发现rotateZ（deg）和rotate旋转方式一模一样，这时候元素的z轴从屏幕指向我们，我们看向
元素是沿着顺时针旋转的，同理我们也可以想象，当元素沿着x，y轴旋转时，我们也站在x，y轴所指向的位置。
但是这样我们还是看着这个盒子是2d的，是一个平面，如果想要达到视觉效果我们需要用到
远景(perspective)放在transform里
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
perspective 作为transform一个属性值，一般设置给父元素，经过研究，范围一般设置在800-1000px最满足人的3d视觉效果，作用于所有3D转换的子元素
如下
div {
width: 200px;
height: 200px;
background-color: red;
transform-style: preserve-3d;
transform: perspective(800px) rotateY(30deg) rotateX(30deg) ;
}
一般还需要给父亲设置 transform-style: preserve-3d，使子元素保持3d转换;
2丶平移
translateX() - 元素沿着本身的x轴移动
translateY() -元素沿着本身的y轴移动,
translateZ() - 元素沿着本身z轴移动，
想要视觉效果，一般会让这个盒子先旋转一定角度
transform值顺序不同带来不同的效果影响
我们看以下代码
<style>
div {
width: 200px;
height: 200px;
background-color: red;
border: 2px solid blue;
float: left;
margin-top: 50px;
margin-right: 30px;
}
.box1 {
transform: perspective(800px) rotateX(30deg);
}
.box2{
transform: perspective(800px) rotateX(30deg) rotateY(30deg);
}
.box3 {
transform: perspective(800px) rotateY(30deg);
}
.box4 {
transform: perspective(800px) rotateY(30deg) rotateX(30deg);
}
</style>
<div class="normal">box</div>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box3</div>
效果
我们可以明显的发现
.box2{
transform: perspective(800px) rotateX(30deg) rotateY(30deg);
}
.box4 {
transform: perspective(800px) rotateY(30deg) rotateX(30deg);
}
先x轴旋转和先y轴旋转，产生的效果是完全不同的，
我们可以理解成
box2先沿着x轴旋转到了某个位置，就是box1的样子，然后再在已这个位置位置沿着当前的y轴旋转，最终到了达到box2的效果。
同理box3，box4.
如果还不明白为什么效果会不同的童鞋请拿出你的手机，有个很好的办法，拿出你的手机
平常我们打开手机，我们把手机看成一个元素，手机屏幕正对着你；
把手机用粉笔去手机长宽的两个中点画两条竖线作为x轴和y轴，
我们先x旋转在y旋转
把你的手机屏幕正对你，记为状态1
transform: perspective(800px) rotateX(15deg) rotateY(20deg);
顺时针沿着X旋转90度，记为状态2
transform: perspective(800px) rotateX(105deg) rotateY(20deg);
此是正面在上方，被则挡住了，我们脑海里想象此时我们站在上方看这个手机；
此时旋转并不是沿着状态1旋转，而是按状态2旋转
transform: perspective(800px) rotateY(105deg) rotateX(110deg) ;
transform: perspective(800px) rotateY(110deg) rotateX(15deg) ;
第二种旋转方式
然后我们由状态1沿着y轴旋转
此时记为状态4，由此状态再次沿着x轴旋转
transform: perspective(800px) rotateY(110deg) rotateX(105deg) ;
这里我只做了旋转，
源码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>24k纯帅</title>
<style>
* {
color: red;
}
.phone {
margin: 50px auto;
position: relative;
height: 400px;
width: 200px;
transform: perspective(800px) rotateY(110deg) rotateX(105deg) ;
transform-style: preserve-3d;
}
div div {
position: absolute;
}
.front {
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
transform: translateZ(10px);
}
.back {
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
transform: rotateY(-180deg) translateZ(10px);
}
.top {
background-color: green;
width: 200px;
height: 20px;
top: 190px;
left: 0;
transform: rotateX(90deg) translateZ(200px) ;
}
.bottom {
background-color: green;
width: 200px;
height: 20px;
top: 190px;
left: 0;
transform: rotateX(-90deg) translateZ(200px) ;
}
.left {
background-color: blue;
width: 20px;
height: 400px;
top: 0;
left: 90px;
transform: rotateY(-90deg) translateZ(100px) ;
}
.right {
background-color: blue;
width: 20px;
height: 400px;
top: 0;
left: 90px;
transform: rotateY(90deg) translateZ(100px) ;
}
.level {
position: absolute;
top: 50%;
left: 0;
width: 200px;
}
.vertical {
position: absolute;
top: 50%;
left: -50%;
width: 400px;
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<div class="phone">
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
<div class="front">
前
<hr class="level">
<hr class="vertical">
</div>
<div class="back">后</div>
</div>
</body>
</html>
平移也是同个道理。
写完拜拜