网站开发总结文档关键词工具

01-空间转换transform: translate3d()

空间转换简介

• 空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同(垂直于电脑屏幕)。
• 空间转换也叫 3D转换
• 属性：transform

平移

transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值与平面转换相同

默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果

/* 电脑是平面，默认无法观察 Z 轴平移效果 需要给父级添加视距(下一节)*/
transform: translate3d(100px, 200px, 300px);

视距

视距：人到电脑屏幕的距离

作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性：(添加给父级，取值范围 800-1200)

perspective(代表下图的d): 视距;
transform: translateZ();代表啊Z

旋转 rotateXYZ()

• Z 轴：rotateZ() ：垂直于电脑屏幕，相当于竹蜻蜓，扇叶是xy轴的平面，竹柄垂直于屏幕。

  <style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box img:hover {transform: rotateZ(360deg);}</style><div class="box"><img src="./images/hero.jpeg" alt="" /></div>
  

• X 轴：rotateX() 相当于竹蜻蜓，扇叶是xz轴的平面，竹柄是屏幕水平方向。

  <style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box {/* 透视效果：近大远小，近实远虚 */perspective: 1000px;}.box img:hover {transform: rotateX(60deg);transform: rotateX(-60deg);}</style><div class="box"><img src="./images/hero.jpeg" alt="" /></div>
  

• Y 轴：rotateY() 相当于竹蜻蜓，扇叶是yz轴的平面，竹柄是屏幕垂直方向。

  <style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box {/* 透视效果：近大远小，近实远虚 */perspective: 1000px;}.box img:hover {transform: rotateY(60deg);transform: rotateY(-60deg);}</style><div class="box"><img src="./images/hero.jpeg" alt="" /></div>
  

左手法则

作用：根据旋转方向确定取值正负

使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

旋转rotate3d()

• rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度,（四个参数全是必选参数）
• x，y，z 取值为0-1之间的数字

立体呈现(transform-style)

作用：设置元素的子元素是位于 3D 空间中还是平面中

属性名：transform-style

属性值：

• flat：子级处于平面中
• preserve-3d：子级处于 3D 空间

案例-3d导航

案例步骤：

1. 搭建立方体
   1. 绿色是立方体的前面
   2. 橙色是立方体的上面
2. 鼠标悬停，立方体旋转

.nav li {position: relative;width: 100px;height: 40px;line-height: 40px;transition: all 0.5s;transform-style: preserve-3d;/* 为了看到橙色和绿色的移动过程，给立方体添加旋转 *//* transform: rotateX(-20deg) rotateY(30deg); */
}.nav li a {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;
}/* 立方体每个面都有独立的坐标轴，互不影响 */
.nav li a:first-child {background-color: green;transform: translateZ(20px);
}.nav li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);
}.nav li:hover {transform: rotateX(-90deg);
}

案例筛子

缩放

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

02-动画animation

• 过渡：实现两个状态间的变化过程
• 动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画实现步骤

1. 定义动画

/* 方式一 */
@keyframes 动画名称 {from {}to {}
}/* 方式二 */
@keyframes 动画名称 {0% {}10% {}......100% {}
}

2. 使用动画

animation: 动画名称 动画花费时长;

复合属性

提示：

• 动画名称和动画时长必须赋值
• 动画时长必须加单位否则无效
• 取值不分先后顺序
• 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

拆分写法animation-play-state()

<style>.box {width: 200px;height: 100px;background-color: pink;/* linear：匀速 */animation: change 1s linear;/* steps：分步动画，工作中，配合精灵图实现精灵动画 */animation: change 1s steps(3);/* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */animation: change 1s 2s;/* 重复次数，infinite：无限循环 */animation: change 1s 3;animation: change 1s infinite;/* alternate：反向 */animation: change 1s infinite alternate;/* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */animation: change 1s forwards;animation: change 1s backwards;}.box:hover {/* 暂停动画 动画在谁身上，就给他的鼠标悬停伪类加animation-play-state: paused;*/animation-play-state: paused;}/* 宽度 从 200 变化到 800 */@keyframes change {from {width: 200px;}to {width: 800px;}}</style><div class="box"></div>

多组动画

animation: 动画一,动画二,... ...
;

	<style>div {width: 140px;height: 140px;border: 1px solid #000;background-image: url(./bg.png);animation: move 0.5s steps(12) infinite,run 3s linear forwards;}@keyframes move {from {background-position:url(./bg.png) 0 0;}to {background:url(./bg.png) -1680px 0;}}@keyframes run {from {transform: translate(0);}to {transform: translate(800px);}}</style><div></div>