持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
平面转换
位移
使用translate实现元素位移效果
取值（正负均可）
像素单位数值
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
技巧
translate()如果只给出一个值, 表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()
<style>
.box {
height: 200px;
width: 200px;
background-color: chartreuse;
transform: translate(100px);
}
</style>
</head>
<body>
<div class="box">
</div>
123321
</body>
绝对定位盒子居中
<style>
.box {
position: relative;
height: 600px;
width: 600px;
background-color: aquamarine;
}
.box .son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
旋转
使用rotate实现元素旋转效果
语法
transform: rotate(角度);
注意：角度单位是deg
turn是圈数
技巧：取值正负均可
取值为正, 则顺时针旋转
取值为负, 则逆时针旋转
<style>
.box {
width: 400px;
height: 400px;
background-color: aquamarine;
margin: 100px auto;
transition: all 10s;
}
.box:hover {
transform: rotate(10turn);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
转换原点
使用transform-origin属性改变转换原点
语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
取值
方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参照盒子自身尺寸计算）
<style>
.father {
height: 800px;
width: 800px;
background-color: aquamarine;
margin: 300px auto;
}
.box {
width: 400px;
height: 400px;
background-color: chartreuse;
margin: 300px auto;
transition: all 2s;
transform-origin: left top;
}
.father:hover .box {
transform: rotate(2turn);
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
</body>
多重转换原理
旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
缩放
transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
<style>
.box {
height: 200px;
width: 200px;
background-color: chartreuse;
margin: 200px auto;
transition: all 3s;
}
.box:hover {
transform: scale(-2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
渐变
使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
使用background-image属性实现渐变背景效果
<style>
.box {
height: 500px;
width: 500px;
background-image: linear-gradient(45deg, red, green, yellow);
background-image: linear-gradient(to right, green, yellow);
background-image: linear-gradient(red, green, yellow);
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
margin: 200px auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
空间转换 3D
3D坐标系
3D 坐标系比2D 多了一个Z轴。
一定要记住3个坐标轴取值的正反：
- X 轴 往右越大，是正值， 否则反之
- Y 轴 往下越大，是正值，否则反之
- Z轴 （指向我们）越大，是正值，否则反之
3D位移
有完整写法：
transform: translate3d(x, y, z);
只不过在很多情况下，我们经常喜欢分开写：
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
透视
透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果
语法:
perspective: 800px;
透视注意事项：
-
取值范围经常在 800px ~ 1200px 之间。
-
一定给父亲添加
-
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
- 其中 d 为透视的距离
- z 是
translateZ的距离， 这个距离靠近我们，盒子越大
3D旋转
有了透视的加持，我们3d旋转效果会比较明显。
rotateX
类似单杠旋转。
注意：默认的旋转中心在盒子的中心位置。
body {
/* 父级添加透视 */
perspective: 400px;
}
img {
transition: all 1s;
}
img:hover {
transform: rotateX(360deg);
}
效果展示：
rotateY
类似钢管舞。
body {
perspective: 400px;
}
img {
transition: all 1s;
}
img:hover {
transform: rotateY(360deg);
}
效果如下：
左手法则
一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。
规则：
- 大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向
- 大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向
立体呈现
让子盒子在父盒子内有空间的展示，此时可以给父亲添加
transform-style: preserve-3d;
二、动画（重点）
动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。
动画使用分为定义和调用：
-
定义：
/* 1. 定义的动画 */ @keyframes dance { from { transform: scale(1) } to { transform: scale(1.5) } }或者是
/* 1. 定义的动画 */ @keyframes dance { 0% { transform: scale(1) } 100% { transform: scale(1.5) } } -
调用
img { width: 200px; /* 2. 使用动画 animation: 动画名称 执行时间; infinite 循环*/ animation: dance .5s infinite; }
动画属性
- 动画名字参照css类选择器命名
- 动画时长和延迟时间别忘了带单位 s
- infinate 无限循环动画（重复次数）
- alternate 为反向 就是左右来回执行动画（跑马灯）
- forwards 动画结束停留在最后一帧状态， 不循环状态使用
- linear 让动画匀速执行
鼠标经过暂停动画
/* 鼠标经过box， 则 ul 停止动画 */
.box:hover ul {
animation-play-state: paused;
}
多组动画
/* 我们想要2个动画一起执行 animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;
最后是原图(●'◡'●)
