空间转换，动画的说明与使用》

空间转换
平面转换是2D，而空间转换是3D：
平面转换：分X轴，Y轴
空间转换：分X轴，Y轴，Z轴

空间位移
语法：
transform:translate3d(x,y,z)

transform:translateX(值)
transform:translateY(值)
transform:translateZ(值)

取值（正负均可）：

像素单位数值
百分比

注意：默认情况设置X，Y，Z是不会达到预期效果

perspective属性实现透视

属性（添加给父级）

perspective:值；
取值：像素单位数值，数值一般在800 - 1200（值越小，效果越明显；值越大，效果越不明显）
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离（视觉效果）

空间旋转
使用rotate实现元素空间旋转效果

语法：

transform:rotateZ(值)；相当于平面内旋转
transform:rotateX(值); 相当于平面为轴（横），由外到内
transform:rotateY(值)；相当于平面为轴（竖），由外向内

左手法则：
判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

拓展

rotate3d(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度
x,y,z取值为0 - 1之间的数字

立体呈现
结合之前的perspective透视属性，是否能呈现立体图形？
答：不能，perspective只增加近大远小，近实远虚的视觉效果

实现方法：

添加transform-style:preserve-3d;
使子元素处于真正的3d空间
默认值flat,表示子元素处于2D平面内呈现

示例
代码如下

<!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;}.cube div {position: absolute;left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: orange;line-height: 200px;text-align: center;/* 向我走近200px */transform: translateZ(200px);}.back {background-color: green;line-height: 200px;text-align: center;}/* cube hover 为了看空间感效果 */.cube:hover {transform: rotateY(90deg);}</style>
</head>
<body><div class="cube"><div class="front">橙色</div><div class="back">绿色</div></div>
</body>
</html>

效果图

空间缩放
语法

transform:scaleX(倍数);
transform:scaleY(倍数);
transform:scaleZ(倍数);
transform:scale3d(x,y,z);

动画

animation添加动画效果

过渡实现的效果：实现2个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放，最终画面，是否暂停）

动画本质：是快速切换大量图片时在人脑中形程的具有连续性的画面

构成动画的最小单元：帧或动画帧

动画的实现步骤
1.定义动画

@keyframes 动画名称 {
from {}
to {}
}

@keyframes 动画名称 {
0% {}
10% {}
15% {}
100% {}
}
注：百分比是指动画执行时间比

2.使用动画(写在要实现动画的主体里)
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>.box {width: 200px;height: 100px;background-color: pink;/* 使用动画 */animation: change 1s;}/* 一. 定义动画：从200变大到600 *//* @keyframes change {from {width: 200px;}to {width: 600px;}} *//* 二. 定义动画：200 到 500*300 到 800*500 *//* 百分比指的是动画总时长的占比 */@keyframes change {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

分别使用两种方法的结果图如下

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

动画曲线：linear–>匀速，steps(次数)–>分步动画，infinite–>无限循环

动画方向：alternate–>实现动画往返

执行完毕时状态：（不可与alternate同时使用）；backwards–>动画停留在最初的位置，forwards–>动画停留在结束的位置

注意：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

属性拆开

使用steps实现逐帧动画

多组动画
语法
animation:
动画1，
动画2，
动画N
；

空间转换，动画的说明与使用》相关推荐

CSS的补充（3 空间转换动画）
一.空间转换属性 transform 语法 transform:translate3d(x,y,z) 透视属性 perspective(添加给父级)视距,指人眼到屏幕的距离取值像素单位,数一般 ...
【CSS3】平面转换空间转换动画
目录平面转换平移缩放倾斜旋转 transform复合属性空间转换空间位移空间旋转呈现立体图形空间缩放动画动画属性 steps逐帧动画多组动画平面转换 CSS3中动画效果包括 ...
2.css动画(空间转换,动画)
1空间转换使用transform属性实现元素在空间内的位移.旋转.缩放等效果空间:是从坐标轴角度定义的.x .y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同. 空间转换也叫3D转换 ...
浅学一点空间转换3D和动画知识
一 . 空间转换3D 3D坐标系 3D坐标系比2D多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是 ...
CSS 空间转换3D和动画
空间转换3D 3D坐标系一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D位移完整写法 tr ...
CSS——空间转换和动画
一.空间转换空间:x.y.z三个坐标轴,z轴和用户的视线在一条直线上,z轴的正轴指向用户自己:空间转换也叫3D转换:(不是网页开发重点.因为目前设计师追求简洁风,空间转换用得少) 属性:transf ...
空间转换 3D；动画（重点）
一.空间转换 3D 1. 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我 ...
HTML里关于空间转换3D和动画效果的实现
一.3D坐标系一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D 位移动 transform: ...
空间转换3D , 动画
1.3d转换 1.认识坐标系 X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 2.3D位移写法完整写法 transform: tr ...
CSS空间转换和动画
一.空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大, ...

空间转换，动画的说明与使用》

空间转换，动画的说明与使用》相关推荐

最新文章

热门文章