CSS 空间转换3D和动画

空间转换3D

3D坐标系

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

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

3D位移

完整写法

 transform: translate3d(x, y, z);

分开写法

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

透视

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

语法:

 perspective: 800px;

透视注意事项：

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

3D旋转

X轴旋转,Y轴旋转,Z轴旋转

transform: rotateX(360deg);
transform: rotateY(360deg);
transform: rotateZ(360deg);

左手法则

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

规则：

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

立体呈现

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

 transform-style: preserve-3d;

动画

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

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

1.定义动画:

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

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

2.调用动画

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

动画属性

animation:动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕状态

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

7.paused 鼠标经过时暂停动画

多组动画之间用逗号隔开

CSS 空间转换3D和动画相关推荐

浅学一点空间转换3D和动画知识
一 . 空间转换3D 3D坐标系 3D坐标系比2D多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是 ...
空间转换 3D；动画（重点）
一.空间转换 3D 1. 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我 ...
HTML里关于空间转换3D和动画效果的实现
一.3D坐标系一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D 位移动 transform: ...
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个坐 ...
空间转换3D , 动画
1.3d转换 1.认识坐标系 X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 2.3D位移写法完整写法 transform: tr ...
CSS——空间转换和动画
一.空间转换空间:x.y.z三个坐标轴,z轴和用户的视线在一条直线上,z轴的正轴指向用户自己:空间转换也叫3D转换:(不是网页开发重点.因为目前设计师追求简洁风,空间转换用得少) 属性:transf ...
快速学习空间转换 3D转换-位移、旋转、缩放
一.空间转换目标:使用transform属性实现元素在空间内的位移.旋转.缩放等效果空间:是从坐标轴角度定义的. x .y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同 ...
css代码写3D盒子动画
完整代码见下: html: <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...