今日内容 3d空间转换 以及动画
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果 -- 空间：是从坐标轴角度定义的，x、y、z三条坐标轴构成一个立体空间，z轴位置与视线方向相同
- 空间转换也叫3d转换
- 属性:
transform
空间位移
使用transform实现空间位移效果
-
语法
transform:translate3d(x,y,z);transform:translateX(值);transform:translateY(值);- transform:translateZ(值)；
-
正负均可
-
像素单位
-
百分比
透视效果
-
目标：使用 perspective 属性实现透视效果
-
属性(添加给父级)
-
perspective:值; -
透视距离也成为视距，所谓的视距就是人的眼睛到屏幕的距离。
空间旋转
-
目标：使用 rotate 实现元素空间旋转效果
-
语法
transform:rotateZ(值);transform:rotateX(值);transform:rotateY(值);
-
左手法则
- 判断旋转方向：左手握住旋转轴，拇指指向正向方向，手指弯曲方向为旋转正值方向
-
拓展
rotate3d(x,y,z,角度度数):用来设置自定义旋转轴的位置及旋转的角度- x，y，z取值为0-1之间的数字
立体呈现
目标：使用 transform-style:preserve-3d;呈现立体图形
-
呈现立体图形步骤
- 给盒子的父元素添加
transform-style:preserve-3d; - 按需求设置子盒子的位置(位移或旋转)
- 给盒子的父元素添加
-
注意
- 空间内，转换元素都有自己独立的坐标轴，互不干扰
立体呈现实现立体正方形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>立方体</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/* perspective: 1000px; */
transform-style: preserve-3d; //开启3d变化的效果
transform: rotateX(20deg) rotateY(30deg); //上帝视角 可以让你清楚看见图形变化
}
.m{
position: absolute;
margin: 200px 300px;
width: 200px;
height: 200px;
background-color: #f00;
}
.m:nth-child(1){
transform: translateZ(100px);
background-color: #ff0;
}
.m:nth-child(6){
transform: translateZ(-100px);
background-color: #f0f;
}
.m:nth-child(2){
transform: translateY(100px) rotateX(-90deg);
background-color: blue;
}
.m:nth-child(3){
transform: translateY(-100px) rotateX(90deg);
background-color: pink;
}
.m:nth-child(4){
transform: translateX(-100px) rotateY(-90deg);
background-color: #000;
}
.m:nth-child(5){
transform: translateX(100px) rotateY(90deg);
background-color: #ccc;
}
</style>
</head>
<body>
<div class="m">1</div>
<div class="m">2</div>
<div class="m">3</div>
<div class="m">4</div>
<div class="m">5</div>
<div class="m">6</div>
</body>
</html>
-
主要的要点就是
-
transform-style: preserve-3d; //开始3d变化的效果，必须开启 不然看不见效果 -
transform: rotateX(20deg) rotateY(30deg); //上帝视角 可以让你清楚看见图形变化
空间缩放(了解即可)
-
目标:使用scale实现空间缩放效果
-
语法
-
transform:scaleX(倍数); -
transform:scaleY(倍数); -
transform:scaleZ(倍数); -
transform:scale3d(x,y,z);
-
动画
目标:使用animation添加动画效果
-
思考:过度可以实现什么效果
- 可以实现两个状态间的变化过程
-
动画效果：实现多个状态间的变化过程，动画过程可控(重复播放，最终画面，是否暂停)
动画实现步骤
目标：实现animation添加动画效果
实现步骤：
-
定义动画
@keyframes 动画名称{ form{ //元素开始的样式 } to{ //元素结束的样式 } } //或者用百分比 @keyframes 动画名称{ //如果没有设置起始状态，那么和元素就和元素默认属性一致 0%{} 25%{} 50%{} 75%{} 100%{} }2.使用动画
animation: 动画名称 动画花费时长;
-
注意：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，则第一个表示动画时长，第二个表示延迟时间、
| 属性 | 作用 | 取值 |
|---|---|---|
| animation-name | 动画名称 | |
| animation | 动画时长 | |
| animation-delay | 延迟时间 | |
| animation-fill-mode**** | 动画执行完毕时候的状态 | forward:保持在动画执行完的状态，backwards:当动画有延迟的时候，开始就是第一帧的状态 |
| animation-timing-function | 速度曲线 | steps(数字)：逐帧动画，linear 匀速运动 |
| animation-iteration-count | 重复次数 | infinite为无限循环 |
| animation-direction | 动画执行方向 | alternate为反向 |
| animation-play-state | 暂停动画 | paused为暂停，通常配合:hover使用 |
动画复合属性
-
多个动画之间要用逗号隔开
animation: boxMove 1.2s steps(12) infinite , imgMove 2s linear forwards ;
