1. 变形：transform属性
实现元素的位移、旋转、缩放等效果
1.1 位移：translate属性值
- 实现元素位移效果.
- translate和margin的区别：
- margin移动盒子会影响其与盒子，把其他盒子挤走。
- 位移translate移动盒子不会影响其他盒子，不脱标。
1. 语法
translate()为一个值时默认表示x轴方向移动的距离.
- 二维空间位移
/* 二维空间 */
transform: translate( x, y );
/* X轴正向为右，Y轴正向为下 */
- 三维空间位移
/* 三维空间 */
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
-
取值（
正负均可）像素单位（px）
百分比（参照物为盒子自身尺寸）
-
应用： 实现元素水平和垂直居中的方式
.father {
position: relative;
width: 500px;
height: 500px;
background: pink;
}
/* 1. 定位+边距（具体像素值） */
.son {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background-color: purple;
}
/* 2. 定位+边距（auto） */
.son {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 四周用边距撑开 */
margin: auto;
width: 200px;
height: 200px;
background-color: purple;
}
/* 3. 定位+位移translate */
.son {
position: absolute;
top: 50%;
left: 50%;
/*
位移取值为百分比数值，参照盒子自身尺寸计算移动距离
*/
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: purple;
}
<div class="father">
<div class="son"></div>
</div>
1.2 旋转：rotate属性值
实现元素旋转效果。 旋转角度单位是 deg .
1. 语法
- 二维空间 : 以原点（50% , 50%）为旋转点
transform: rotate(-360deg); /* 逆时针转360度 */
/* 角度单位是deg */
取正值为顺时针旋转，取负值为逆时针旋转.
- 三维空间
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
用左手法则来判断旋转方向：
左手握住旋转轴, 拇指指向位移（x,y轴）正值方向, 手指弯曲方向为旋转正值方向。
2. 拓展：
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
1.3 缩放：scale属性值
改变元素的尺寸，让元素放大缩小。
1. 语法：
- 二维空间
transform: scale(x轴缩放倍数, y轴缩放倍数);
- 三维空间
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
-
技巧：
transform : scale( 缩放倍数 );
一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放。
scale值大于1表示放大，scale值小于1表示缩小。
1.4 （ 拓展）倾斜：skew属性值
让元素变倾斜 。
1. 语法
transform: skew(30deg) ; /* 倾斜度数 */
正值往左倾斜，负值往右倾斜
2. 常见应用：移动的光条
- 先给盒子背景渐变，左右透明，中间不透明，形成光条；
background-image: linear-gradient(to right, transparent,rgba(255,255,255,.7),transparent);
to + 方向 ，可以改变渐变方向，颜色由深变浅。
默认渐变方向是从上到下（形成的光条是横着的），而我们想要的是从左向右渐变，中间形成竖着的光条，所以用 to right 。
- 让光条盒子倾斜；
/* 盒子向右倾斜30度 */
transform: skew(-30deg);
- 用
:hover, 让鼠标经过盒子时显示光条，且移动。 - 核心代码：
a::before{
content: '';
position: absolute;
top: 0;
/*left:0; 覆盖在a盒子上*/
left: -115%;
width: 100%;
height: 100%;
// background-color: pink;
//倾斜
transform: skew(-30deg);
//背景渐变
background-image: linear-gradient(to right, transparent,rgba(255,255,255,.6),transparent);
}
a:hover::before{
transition: all .2s;
/*鼠标经过a盒子，光条由原来的左边-115%移动到右边115%的位置，完成移动效果*/
left: 115%;
}
2. transform-origin属性
改变转换原点，即改变原点的位置.
1. 语法
transform-origin: 原点水平位置(x) 原点垂直位置(y);
/* 默认原点是盒子的中心点 */
transform-origin: 50% 50%;
2. 取值
方位名词：left、top、right、bottom、center.
像素单位（px）
百分比（参照盒子自身尺寸计算）
3. transform复合属性
实现多重转换的效果.
1. 语法
transform: translate() rotate();
2. 多重转换原理 ：(先移动，后旋转)
旋转会改变网页元素的坐标轴向， 因此如果先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果.
4. 三维空间（3D）中的其他属性
4.1 透视： perspective 属性
1. 语法
perspective: 像素值 ; /* 给父元素添加 */
像素单位数值， 数值一般在 800px – 1200px。
2. 作用
空间转换时，为元素添加近大远小、近实远虚的视觉效果；
视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
Z轴是视线方向，移动效果应该是距离的远或近 。
4.2 立体呈现
呈现立体图形
1. 语法：
transform-style: preserve-3d ; /*给盒子父元素添加*/
2. 实现：
给盒子父元素添加 transform-style : preserve-3d ;
使子元素处于真正的3d空间 , 默认值flat, 表示子元素处于2D平面内呈现
按需求设置子盒子的位置（位移或旋转）
3. 注意：
- 使用perspective透视属性不能呈现立体图形，perspective只增加近大远小、近实远虚的视觉效果。
- 空间内，转换元素都有自已独立的坐标轴，互不干扰。
4.3 3D导航
使用立体呈现技巧实现3D导航效果
摆放红绿盒子步骤：
-
搭建立方体
- 绿色盒子是立方体的前面
- 橙色盒子是立方体的上面
- 添加hover状态旋转切换效果
-
绿色和橙色部分共需要3个标签
- 1个父级标签
- 绿色和橙色共2个标签（子级）
-
思路
- li标签
- 添加立体呈现属性transform-style: preserve-3d;
- 添加旋转属性（为了便于观察效果，案例完成后删除即可）
- a标签定位（子绝父相）
- 英文部分添加旋转和位移样式
- 中文部分添加位移样
- 过渡
- 鼠标滑过li， 添加空间旋转样式
- li添加过渡属性
-
注：案例完成后，删除li的旋转样式。
实现代码:
css代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.nav {
margin: 100px;
}
.nav li {
perspective: 200px;
float: left;
width: 150px;
height: 50px;
background-color: pink;
margin: 0 20px;
}
.nav li a {
position: relative;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #fff;
font-size: 18px;
transition: all 0.3s;
/* 让子盒子立体空间展示 */
transform-style: preserve-3d;
}
.nav li a span {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 50px;
}
.nav li span:nth-child(1) {
background-color: orange;
/* 上面盒子 沿着x轴旋转90度， 往上走 y 25px 负值*/
transform: translateY(-25px) rotateX(90deg);
}
.nav li span:nth-child(2) {
background-color: green;
/* 往我们面前移动 25px， z轴 正值*/
transform: translateZ(25px);
}
.nav li a:hover {
transform: rotateX(-90deg);
}
html代码：
<div class="nav">
<ul>
<li>
<a href="">
<span>index</span>
<span>首页</span>
</a>
</li>
<li>
<a href="">
<span>index</span>
<span>首页</span>
</a>
</li>
<li>
<a href="">
<span>index</span>
<span>首页</span>
</a>
</li>
<li>
<a href="">
<span>index</span>
<span>首页</span>
</a>
</li>
</ul>
</div>
