WEBSTORM前端 —— 第3章：移动 Web —— 第2节：空间转换、转化
目录
一、空间转换
1.空间转换
2.空间转换 – 平移
3.视距 perspective
4.空间 – 旋转
③空间旋转——Z轴代码与效果视频
④空间旋转——X轴代码与效果视频
⑤空间旋转——Y轴代码与效果视频
5.立体呈现 – transform-style
案例 – 3D 导航
6.空间转换 – 缩放
①属性
②效果视频与代码
二、动画 - animation
1.动画 - animation
③动画体验效果视频与代码
④动画实现步骤
⑤animation复合属性
⑥animation拆分写法
⑦.案例—走马灯效果
2.动画 – 逐帧动画
3.动画 – 多组动画
4.案例—全民出游
一、空间转换
1.空间转换
①空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
②空间转换也叫 3D转换
③属性：transform
2.空间转换 – 平移
①属性
②取值：（正负均可）
- 像素单位数值
- 百分比（参照盒子自身尺寸计算结果）
③提示 ：默认情况下，Z 轴平移没有效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>空间平移</title><style>.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover {/* 电脑是平面，默认无法观察 Z 轴平移效果 *//* transform: translate3d(100px, 200px, 300px); *//* 3d 小括号里面必须逗号隔开三个数 *//* transform: translate3d(100px, 200px); */transform: translateX(100px);transform: translateY(-100%);transform: translateZ(300px);}</style>
</head>
<body><div class="box"></div>
</body>
</html>效果图：
3.视距 perspective
①作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果
②透视效果：近大远小、近实远虚
③属性：(添加给父级，取值范围 800-1200)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>透视效果</title><style>/* 视距属性必须添加给 直接父级 */.father {perspective: 1000px;/* perspective: 10000px;perspective: 100px; */}.son {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.son:hover{transform: translateZ(-300px);transform: translateZ(300px);}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>效果视频：
移动web【视距 perspective】
4.空间 – 旋转
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
①左手法则 – 根据旋转方向确定取值正负 ：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向
②拓展
- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
- x，y，z 取值为0-1之间的数字
③空间旋转——Z轴代码与效果视频
<!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>空间旋转-Z轴</title><style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box img:hover {transform: rotateZ(360deg);}</style></head><body><div class="box"><img src="./images/hero.jpeg" alt="" /></div></body>
</html>空间旋转——Z轴代码与效果视频
④空间旋转——X轴代码与效果视频
<!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>空间旋转-X轴</title><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></head><body><div class="box"><img src="./images/hero.jpeg" alt="" /></div></body>
</html>
空间旋转——X轴代码与效果视频
⑤空间旋转——Y轴代码与效果视频
<!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>空间旋转-Y轴</title><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></head><body><div class="box"><img src="./images/hero.jpeg" alt="" /></div></body>
</html>空间旋转——Y轴代码与效果视频
5.立体呈现 – transform-style
①作用：设置元素的子元素是位于 3D 空间中还是平面中
②属性名：transform-style
③属性值：
- flat：子级处于平面中
- preserve-3d：子级处于 3D 空间
④呈现立体图形步骤
- 父元素添加transform-style: preserve-3d；
- 子级定位
- 调整子盒子的位置（位移或旋转）
⑤提示：空间内，转换元素都有自已独立的坐标轴，互不干扰
<!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><style>.cube {position: relative;width: 200px;height: 200px;margin: 100px auto;/* background-color: pink; */transition: all 2s;transform-style: preserve-3d;/* 旋转与案例效果无关，用来看前后移动的效果 */ /* transform: rotateY(89deg); */}.cube div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: orange;transform: translateZ(100px);}.back {background-color: green;transform: translateZ(-100px);}.cube:hover {transform: rotateY(90deg);}</style></head><body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div></body>
</html>
效果视频：
立体呈现 – transform-style
案例 – 3D 导航
效果视频与代码：
案例 – 3D 导航
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>3D导航</title><style>ul {margin: 0;padding: 0;list-style: none;}.nav {width: 300px;height: 40px;margin: 50px auto;}.nav ul {display: flex;}.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);}</style></head><body><div class="nav"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div></body>
</html>6.空间转换 – 缩放
①属性
transform: scale3d(x, y, z);transform: scaleX();transform: scaleY();transform: scaleZ();
②效果视频与代码
空间转换 – 缩放
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>空间缩放</title><style>ul {margin: 0;padding: 0;list-style: none;}.nav {width: 300px;height: 40px;margin: 50px auto;}.nav li {position: relative;float: left;width: 100px;height: 40px;line-height: 40px;transition: all 0.5s;transform-style: preserve-3d;transform: scaleX(0.5);transform: scaleY(2);transform: scaleZ(3);transform: scale3d(0.5, 2, 3);}.nav li a {position: absolute;left: 0;top: 0;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);}</style></head><body><div class="nav"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div></body>
</html>二、动画 - animation
1.动画 - animation
①过渡：实现两个状态间的变化过程
②动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
③动画体验效果视频与代码
动画体验效果视频与代码
<!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><style>div {width: 100px;height: 100px;background-color: pink;animation: change 1s infinite alternate;}@keyframes change {0% {transform: translate(0);}100% {transform: translate(600px);}}</style></head><body><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><style>.box {width: 200px;height: 100px;background-color: pink;animation: change 1s;}/* 动画一：宽度从200变化到800 *//* @keyframes change {from {width: 200px;}to {width: 800px;}} *//* 动画二：从 200*100 变化到 300*300 变化到800*500 *//* 百分比：表示的意思是动画时长的百分比 */@keyframes change {0% {width: 200px;height: 100px;}20% {width: 300px;height: 300px;}100% {width: 800px;height: 500px;}}</style></head><body><div class="box"></div></body>
</html>⑤animation复合属性
<!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>animation复合属性</title><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;}/* 宽度 从 200 变化到 800 */@keyframes change {from {width: 200px;}to {width: 800px;}}</style></head><body><div class="box"></div></body>
</html>⑥animation拆分写法
<!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>animation拆分写法</title><style>.box {width: 200px;height: 100px;background-color: pink;/* 动画名称 */animation-name: change;/* 动画时长 */animation-duration: 1s;/* 播放次数 */animation-iteration-count: infinite;/* animation-play-state: paused; */}.box:hover {/* 暂停动画 */animation-play-state: paused;}/* 宽度从 200 变化到 800 */@keyframes change {0% {width: 200px;}100% {width: 800px;}}</style></head><body><div class="box"></div></body>
</html>⑦.案例—走马灯效果
案例—走马灯效果
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>走马灯</title><style>* {padding: 0;margin: 0;}li {list-style: none;}img {display: block;width: 200px;}.box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}.box ul {display: flex;animation: move 6s infinite linear;}/* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */@keyframes move {0% {transform: translate(0);}100% {transform: translate(-1400px);}}.box:hover ul {animation-play-state: paused;}</style></head><body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!-- 替身：填补显示区域的露白 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div></body>
</html>2.动画 – 逐帧动画
<!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><style>div {width: 140px;height: 140px;border: 1px solid #000;background-image: url(./images/bg.png);animation: run 1s steps(12) infinite;}@keyframes run {from {background-position: 0 0;}to {background-position: -1680px 0;}}</style>
</head>
<body><div></div>
</body>
</html>效果视频：
动画 – 逐帧动画
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=device-width, initial-scale=1.0"><title>多组动画</title><style>div {width: 140px;height: 140px;/* border: 1px solid #000; */background-image: url(./images/bg.png);animation: run 1s steps(12) infinite,move 3s forwards;}/* 当动画的开始状态样式 跟 盒子默认样式相同，可以省略动画开始状态的代码 */@keyframes run {/* from {background-position: 0 0; } */to {background-position: -1680px 0;} }@keyframes move {/* 0% {transform: translate(0);} */100% {transform: translate(800px);} }</style>
</head>
<body><div></div>
</body>
</html>4.案例—全民出游
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}.box {width: 100%;height: 100%;background: url('images/f1_1.jpg') no-repeat top center;background-size: cover;position: relative;}.cloud img {position: absolute;left: 50%;}.cloud img:nth-child(1) {top: 20px;margin-left: -260px;animation: cloud 2s linear infinite alternate;}.cloud img:nth-child(2) {top: 100px;margin-left: 380px;animation: cloud 2.5s linear infinite alternate;}.cloud img:nth-child(3) {top: 200px;margin-left: -560px;animation: cloud 3s linear infinite alternate;}.balloon {position: absolute;left: 50%;top: 20%;margin-left: -390px;animation: balloon 1.5s linear alternate infinite;}.giraffe {position: absolute;left: 50%;margin-left: 160px;top: 15%;}.text {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);animation: text 1s ease forwards;}.jump_text img {position: absolute;left: 50%;bottom: 42px;width: 100px;}.jump_text img:nth-child(1) {margin-left: -390px;animation: jump_text 0.8s infinite alternate;}.jump_text img:nth-child(2) {margin-left: -180px;animation: jump_text 0.8s 0.2s infinite alternate;}.jump_text img:nth-child(3) {margin-left: 35px;animation: jump_text 0.8s 0.4s infinite alternate;}.jump_text img:nth-child(4) {margin-left: 240px;animation: jump_text 0.8s 0.6s infinite alternate;}/* 白云动画 */@keyframes cloud {0% {transform: translateX(0px);}100% {transform: translateX(40px);}}/* 热气球动画 */@keyframes balloon {0% {transform: translateY(0px);}100% {transform: translateY(-30px);}}/* 跳动文字 */@keyframes jump_text {0% {transform: translateY(0px);}100% {transform: translateY(-30px);}}/* 文字 *//* 注意：因为transform是复合属性，所以我们要重新申明一遍translate */@keyframes text {0% {transform: translate(-50%, -50%) scale(1);}20% {transform: translate(-50%, -50%) scale(0);}40% {transform: translate(-50%, -50%) scale(1.4);}70% {transform: translate(-50%, -50%) scale(0.8);}100% {transform: translate(-50%, -50%) scale(1);}}</style></head><body><div class="box"><!-- 白云 --><div class="cloud"><img src="images/yun1.png" /><img src="images/yun2.png" /><img src="images/yun3.png" /></div><!-- 热气球 --><div class="balloon"><img src="images/san.png" /></div><!-- 长颈鹿 --><div class="giraffe"><img src="images/lu.png" /></div><!-- 文字 --><div class="text"><img src="images/font1.png" /></div><!-- 跳动文字 --><div class="jump_text"><img src="images/1.png" /><img src="images/2.png" /><img src="images/3.png" /><img src="images/4.png" /></div></div></body>
</html>