一 . 空间转换3D

3D坐标系

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

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

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

1 . 3D位移

完整写法 :

 transform: translate3d(x, y, z);

分开写法 :

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

2 . 3D旋转

绕x轴旋转 :

transform: rotateX(90deg);

绕y轴和z轴同理.

完整写法 :

div:hover {transform: rotate3d(0, 0.5, 1, 90deg);}/* 3D旋转的综合写法 rotate3d(x, y, z, 度数) x,y,z取0-1,类似于opacity *//* transform: rotate3d(0,0.5,1,90deg); *

左手法则

规则：

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

3 . 透视

语法规范 :

perspective: 800px;/* 1. 透视给父级添加 *//* 2. 近大远小 近实远虚 *//* 3. 透视取值在800px ~ 1200px  */

4 . 立体呈现

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

 transform-style: preserve-3d;

二 . 动画

1 . 动画步骤

首先定义动画 :

/* 定义动画  */@keyframes move {/* 起始位置 */0% {}25% {transform: translate(800px, 0) rotateZ(360deg);}50% {transform: translate(800px, 400px) rotateZ(720deg);}75% {transform: translate(0, 400px) rotateZ(1080deg);}/* 结束位置 */100% {transform: translate(0, 0) rotateZ(1440deg);}}

接着调用动画 :

animation: move 5s linear 1s infinite alternate forwards;

2 . 动画属性

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

/* 调用动画 animation: 动画名 执行时间 动画速度 开始时间 循环次数 动画方向 结束状态 */
/* 动画结束状态不能和动画循环次数和动画方向同时使用 */
/* animation: backwards;结束停在第一帧 */
/* animation: move 5s linear 1s forwards; */

3 . 鼠标经过暂停动画

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

4 . 多组动画用逗号隔开

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

浅学一点空间转换3D和动画知识相关推荐

CSS 空间转换3D和动画
空间转换3D 3D坐标系一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D位移完整写法 tr ...
空间转换 3D；动画（重点）
一.空间转换 3D 1. 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我 ...
HTML里关于空间转换3D和动画效果的实现
一.3D坐标系一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D 位移动 transform: ...
移动web 空间转换 3D
移动web 空间转换 3D 空间转换 3D 3D位移透视 3D旋 rotateX rotateY 左手法则立体呈现空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐 ...
空间转换3D , 动画
1.3d转换 1.认识坐标系 X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 2.3D位移写法完整写法 transform: tr ...
快速学习空间转换 3D转换-位移、旋转、缩放
一.空间转换目标:使用transform属性实现元素在空间内的位移.旋转.缩放等效果空间:是从坐标轴角度定义的. x .y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同 ...
CSS空间转换和动画
一.空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大, ...
移动Web【空间转换[空间位移、透视、空间旋转、立体呈现、3D导航、空间缩放]、动画、综合案例】
文章目录一.空间转换 1.1 空间位移 1.2 透视 1.3 空间旋转 1.4 立体呈现 1.5 3D导航 1.6 空间缩放二.动画 2.1 动画的实现步骤 2.2 动画属性三.综合案例 2.1 ...
CSS3的transform之3d转换、CSS3动画
文章目录前言一.perspective属性和transform-style属性二.transform之3d转换 transform之translate3d(x,y,z)平移 tranform之r ...

浅学一点空间转换3D和动画知识

一 . 空间转换3D

3D坐标系

1 . 3D位移

2 . 3D旋转

左手法则

3 . 透视

4 . 立体呈现

二 . 动画

1 . 动画步骤

2 . 动画属性

3 . 鼠标经过暂停动画

4 . 多组动画用逗号隔开

浅学一点空间转换3D和动画知识相关推荐

最新文章

热门文章