转换 —— transform

2D转换

移动 —— translate

旋转 —— rotate

缩放 —— scale

2D转换综合写法

设置转换中心点

3D转换

3D移动 —— translate3d

2D转换 —— rotate3d

透视 —— perspective

3D呈现 —— transform-style

练习

使盒子居中

旋转出内容框

盒子的两面

2D转换

移动 —— translate

1.语法：

transform：translate(x,y);

或分开写：

transform：translateX（n）;

transform：translateY（n）;

2.重点：

可以沿X或Y轴移动；注意：X/Y轴起点为左上角
其的移动不影响其它元素；
.translate的百分比单位相对于自身元素的大小，translate：(50%，50%）自身的一半；
对行内标签无效果。

旋转 —— rotate

1.语法：

transform：rotate（度数deg）；

2.重点：

度数为正时，为顺时针转；度数为负时，为逆时针转;
默认旋转中心为元素中心点。

缩放 —— scale

1.语法：

transform：scale(x,y);

x,y同时缩放：

transform：scale(n) ;

2.重点：

x代表宽度缩放；y代表高度缩放。
x,y没有单位，值为原来的倍数。
默认缩放中心为元素中心点。
不影响其他元素。

2D转换综合写法

1.同时使用多个转换，格式：

transform: translate() rotate() scale() ;

2.顺序影响转换效果，举例：

先旋转会改变坐标轴方向

3.同时有多个属性，位移放在最前面。

设置转换中心点

transform-origin: x y;
默认：（50% 50%）== (center center) ；
x,y可设置像素 ( 上距左距 ) 或方位名词（top bottom left ) ;

3D转换

由三维坐标系组成，x轴向右为正，y轴向下为正，z轴向外为正

3D移动 —— translate3d

1.语法：

transform:translateX(100px); 仅在x轴上移动

transform:translateY(100px); 仅在y轴上移动

transform:translateZ(100px); 仅在z轴上移动

统一表示：transform: translate3d(x,y,z);

2.注意：

（1）在z轴上单位一般用px ；

（2）x，y，z轴没有时不可省略其位置，要写成 0 px ;

2D转换 —— rotate3d

1.语法：

transform:rotateX(45deg); 沿x轴正方向旋转45度

transform:rotateY(45deg); 沿y轴正方向旋转45度

transform:rotateZ(45deg); 沿z轴正方向旋转45度--形同与2d旋转

统一表示：transform:rotate3d(x,y,z,deg) ;

2.判断旋转方向方法：

左手螺旋准则：角度为正，大拇指为轴正向，四指指向为旋转方向。

3.注意：

（1）x，y，z轴统一书写时，其内容不可省略，有的写1，没有的写0；

（2）沿各轴旋转时，其他轴方向可能会改变。

透视 —— perspective

效果：在2d平面生成近大远小的视觉立体。
语法：perspective：500px;
理解：透视表示为视距，指人眼到物体的距离，当距离越小，物体的像越大。
注意：

（1）透视要写在被观察元素的父辈元素的盒子上；

（2）其距离是表示在z轴上的；

（3）视距大小及父元素内子元素排布影响物体角度。

3D呈现 —— transform-style

1.意义：在父元素开启三维的情况下，控制子元素是否开启三维空间；

2.取值：

transform-style：flat ——不开启三维空间；（默认）

transform-style：preserve-3d ——开启三维空间；

3.注意：代码要写给父级元素，但影响的为子级元素。

练习

使盒子居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=, initial-scale=1.0"><title>使盒子垂直居中</title>
</head>
<style>.container{width: 400px;height: 300px;background-color: cadetblue;position: relative;}.main{width: 150px;height: 100px;background-color: cornflowerblue;position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);}</style>
<body><div class="container"><div class="main"></div></div> 
</body>
</html>

旋转出内容框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片旋转问题</title>
</head>
<style>.box{width: 100px;height: 100px;border: 1px solid cornflowerblue;margin: 50px 50px;overflow: hidden;float: left;}.box::after{content: "我是图图小淘气，面对世界很好奇";display: block;font-family: 翩翩体-简;width: 100px;height: 100px;padding: 8px 0 0 13px;background-color: rgba(95, 158, 160, 0.699); border: 1px solid rgba(58, 30, 216, 0.555);box-sizing: border-box;border-radius: 50% 0 0 0;transform: rotate(180deg);transform-origin: left bottom;transition: all .2s;}.box:hover::after{transform: rotate(0deg);}
</style>
<body><div class="box"></div><div class="box"></div><div class="box"></div>
</body>
</html>

盒子的两面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body{perspective: 600px;}.box{height: 200px;width: 300px;margin: 200px auto;background-color: darkgray;position: relative;transform-style: preserve-3d;transition:all .5s;}.box:hover{transform: rotateX(90deg);}.main,.back{height: 200px;width: 300px;position:absolute;right: 0;top: 0;text-align: center;line-height: 200px;font-size: 30px;font-style: italic;}.main{background-color: darkkhaki;transform: translateZ(100px);}.back{background-color: darkorange;transform:translateY(100px) rotateX(-90deg);}
</style>
<body><div class="box"><div class="main">Time and tide</div><div class="back">Waits for no man!</div></div>
</body>
</html>

就到这里啦！