一、空间转换 3D

1. 3D坐标系

3D 坐标系比2D 多了一个Z轴。

一定要记住3个坐标轴取值的正反：

X 轴往右越大，是正值，否则反之
Y 轴往下越大，是正值，否则反之
Z轴（指向我们）越大，是正值，否则反之

2. 3D位移

有完整写法：

 transform: translate3d(x, y, z);

只不过在很多情况下，我们经常喜欢分开写：

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

3. 透视

透视的作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

语法:

 perspective: 800px;

透视注意事项：

取值范围经常在 800px ~ 1200px 之间。
一定给父亲添加
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
- 其中 d 为透视的距离
- z 是 translateZ 的距离，这个距离靠近我们，盒子越大

4. 3D旋转

有了透视的加持，我们3d旋转效果会比较明显。

4.1 rotateX

类似单杠旋转。

注意：默认的旋转中心在盒子的中心位置。

 body {/* 父级添加透视 */perspective: 400px;
}img {transition: all 1s;
}img:hover {transform: rotateX(360deg);
}

效果展示：

4.2 rotateY

类似钢管舞。

body {perspective: 400px;
}img {transition: all 1s;
}img:hover {transform: rotateY(360deg);
}

效果如下：

5.左手法则

一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。

规则：

大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向
大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

6. 立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加开启3d

 transform-style: preserve-3d;

二、动画（重点）

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

定义：定义动画@keyframes. dance自己取值的动画名. from开始 to 结束

/* 1. 定义的动画 */
@keyframes dance {from {transform: scale(1)}to {transform: scale(1.5)}
}

或者是 0%开始，100%结束中间可加值50% .75%等等

/* 1. 定义的动画 */@keyframes dance {0% {transform: scale(1)} 100% {transform: scale(1.5)}}

调用

调用动画 animation ....；

img {width: 200px;/* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/animation: dance .5s infinite;
}

1. 动画属性

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

1.1 鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {animation-play-state: paused;
}

1.2 多组动画

用逗号隔开

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

重点单词

空间转换 3D；动画（重点）相关推荐

空间转换3D , 动画
1.3d转换 1.认识坐标系 X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 2.3D位移写法完整写法 transform: tr ...
浅学一点空间转换3D和动画知识
一 . 空间转换3D 3D坐标系 3D坐标系比2D多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是 ...
CSS 空间转换3D和动画
空间转换3D 3D坐标系一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D位移完整写法 tr ...
CSS空间转换和动画
一.空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大, ...
移动web 空间转换 3D
移动web 空间转换 3D 空间转换 3D 3D位移透视 3D旋 rotateX rotateY 左手法则立体呈现空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐 ...
HTML里关于空间转换3D和动画效果的实现
一.3D坐标系一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D 位移动 transform: ...
CSS——空间转换和动画
一.空间转换空间:x.y.z三个坐标轴,z轴和用户的视线在一条直线上,z轴的正轴指向用户自己:空间转换也叫3D转换:(不是网页开发重点.因为目前设计师追求简洁风,空间转换用得少) 属性:transf ...
web移动中空间转换与动画
一,空间转换 1空间转换使用transform属性实现元素在空间内的位移.旋转.缩放等效果 x .y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同. 2空间位移语法transform: ...
空间转换，动画的说明与使用》
空间转换平面转换是2D,而空间转换是3D: 平面转换:分X轴,Y轴空间转换:分X轴,Y轴,Z轴空间位移语法: transform:translate3d(x,y,z) transform:tr ...

空间转换 3D；动画（重点）

一、空间转换 3D

1. 3D坐标系

2. 3D位移

3. 透视

4. 3D旋转

4.1 rotateX

4.2 rotateY

5.左手法则

6. 立体呈现

二、动画（重点）

1. 动画属性

1.1 鼠标经过暂停动画

1.2 多组动画

重点单词

空间转换 3D；动画（重点）相关推荐

最新文章

热门文章

空间转换 3D； 动画（重点）

一、空间转换 3D

1. 3D坐标系

2. 3D位移

3. 透视

4. 3D旋转

4.1 rotateX

4.2 rotateY

5.左手法则

6. 立体呈现

二、动画（重点）

1. 动画属性

1.1 鼠标经过暂停动画

1.2 多组动画

重点单词

空间转换 3D； 动画（重点）相关推荐

最新文章

热门文章

空间转换 3D；动画（重点）

空间转换 3D；动画（重点）相关推荐