CSS3之空间转换和动画
目录
CSS3之空间转换和动画一、空间转换1.1 概述1.2 3D转换常用的属性1.3 3D转换：translate3d（位移）1.4 3D转换：perspective（视角）1.5 3D转换：rotate3d（旋转）1.6 3D转换：transform-style: preserve-3d（立体呈现）1.7 3D转换：scale3d（缩放）1.7 3D导航案例
二、动画2.1 动画介绍2.2 动画的基本使用2.3 动画的常用属性2.4 逐帧动画
一、空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
1.1 概述
空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同 空间转换也叫3D转换 属性：transform 2D转换能够改变元素X轴和Y轴方向特性，3D转换还能改变Z轴方向特性，并且可以通过视角设置透视关系，使元素具有透视效果
1.2 3D转换常用的属性
1.3 3D转换：translate3d（位移）
目标：使用translate实现元素空间位移效果
语法
transform: translate3d(x, y, z); transform: translateX(x);transform: translateY(y);transform: translateZ(z); 取值（正负即可）：① 数字+px ② 百分比注意点：x，y，z是不能够省略的，如果没有就写0
1.4 3D转换：perspective（视角）
目标：使用perspective属性实现透视效果
思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
答：近大远小、近清楚远模糊 思考：默认情况下，为什么无法观察到Z轴位移效果？
答：Z轴是视线方向，移动效果是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果 属性（添加给父级）
perspective: 值;取值：像素单位数值， 数值一般在800 – 1200 作用
空间转换时，为元素添加近大远小、近实远虚的视觉效果
1.5 3D转换：rotate3d（旋转）
目标：使用rotate实现元素空间旋转效果
语法
transform: rotate3d(x, y, z, angle);transform: rotateX(x);transform: rotateY(y);transform: rotateZ(z); 注意点：
rotate3d(x, y, z, angle) ：用来设置自定义旋转轴的位置及旋转的角度x，y，z 取值为0-1之间的数字 左手法则：判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
1.6 3D转换：transform-style: preserve-3d（立体呈现）
目标： 使用transform-style: preserve-3d呈现立体图形
思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果 实现方法
添加transform-style: preserve-3d;使子元素处于真正的3d空间 transform-style取值
preserve-3d ：设置3D转换flat ：默认值 呈现立体图形步骤
盒子父元素添加transform-style: preserve-3d;按需求设置子盒子的位置（位移或旋转） 注意：空间内，转换元素都有自已独立的坐标轴，互不干扰
1.7 3D转换：scale3d（缩放）
目标：使用scale实现空间缩放效果
语法
transform: scale3d(x, y, z)transform: scaleX(x)transform: scaleY(y)transform: scaleZ(z)
1.7 3D导航案例
目标：使用立体呈现技巧实现3D导航效果
实现思路：
搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
li标签
添加立体呈现属性transform-style: preserve-3d;添加旋转属性（为了便于观察效果，案例完成后删除即可） a标签
调节a标签的位置
a标签定位（子绝父相）英文部分添加旋转和位移样式中文部分添加位移样式 添加hover状态旋转切换效果
鼠标滑过li， 添加空间旋转样式li添加过渡属性 注意： 案例完成后，删除li的旋转样式
二、动画
目标：使用animation添加动画效果
2.1 动画介绍
动画是CSS3中具有颠覆性的特征之一，有通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停） 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面 构成动画的最小单元：帧或动画帧
2.2 动画的基本使用
制作动画分为两步：
先定义动画 再使用（调用）动画 动画的序列
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果动画是元素从一种样式逐渐变化为另外一种样式的效果。你可以改变任意多的样式任意多的次数请使用百分比来规定变化发生的时间，或者关键词 from 和 to ，等同于 0% 和 100%
使用 @keyframes 定义动画（类似定义类选择器）
/* 定义动画 */
/* ① 百分比 */
@keyframes 动画名 {
0% {
初始状态样式
}
100% {
动画结束时样式
}
}
/* 关键字 */
@keyframes 动画名 {
from {
初始状态样式
}
to {
动画结束时样式
}
}
元素使用动画
/* 使用(调用动画) */
使用动画的元素 {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
快速体验 定义并使用动画
/* 需求：我们打开页面，盒子就从左边走到右边 */
/* 第1种：百分比 */
/* 1.定义动画 */
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1000px, 0);
}
}
/* 第2种：关键字 */
/* 1.定义动画 */
/* from 和 to 等价于 0% 和 100% */
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(1000px, 0);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 */
/* 动画名称 */
animation-name: move;
/* 动画持续时间 */
animation-duration: 2s;
}
动画序列里的百分比
动画的连写
动画名称和动画时长必须赋值取值不分先后顺序如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
2.3 动画的常用属性
2.4 逐帧动画
目标：使用steps实现逐帧动画
属性： animation-timing-function 取值： steps(数字)：逐帧动画 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果 animation-timing-function: steps(N); 将动画过程等分成N份 精灵动画制作步骤
准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图 定义动画
改变背景图的位置（移动的距离就是精灵图的宽度） 使用动画
添加速度曲线steps(N)，N与精灵图上小图个数相同添加无限重复效果 多组动画
思考：如果想让小人跑远一些，该如何实现？答：精灵动画的同时添加盒子位移动画
/* 样式代码 */
.box {
width: 140px;
height: 140px;
background: url("./images/jlbg.png") no-repeat 0 0;
animation: run 1s steps(12) 3, move 3s linear forwards;
}
@keyframes run {
/* 动画的开始状态和原来的默认样式相同时，可以省略开始状态的代码 */
0% {
background-position: 0 0;
}
100% {
background-position: -1680px 0;
}
}
@keyframes move {
0% {
transform: translate(0);
}
100% {
transform: translate(1000px);
}
}
相关链接
您阅读本篇文章共花了：
发表评论