CSS空间转换
文章目录
- 01-空间转换transform: translate3d()
- 空间转换简介
- 平移
- 视距
- 旋转 rotateXYZ()
- 左手法则
- 旋转rotate3d()
- 立体呈现(transform-style)
- 案例-3d导航
- 案例筛子
- 缩放
- 02-动画animation
- 动画实现步骤
- 复合属性
- 拆分写法animation-play-state()
- 多组动画
01-空间转换transform: translate3d()
空间转换简介
- 空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同(垂直于电脑屏幕)。
- 空间转换也叫 3D转换
- 属性:transform
平移
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();
取值与平面转换相同
默认情况下,Z 轴平移没有效果,原因:电脑屏幕默认是平面,无法显示 Z 轴平移效果
/* 电脑是平面,默认无法观察 Z 轴平移效果 需要给父级添加视距(下一节)*/ transform: translate3d(100px, 200px, 300px);
视距
视距:人到电脑屏幕的距离
作用:指定了观察者与 Z=0 平面的距离,为元素添加透视效果
透视效果:近大远小、近实远虚
属性:(添加给父级,取值范围 800-1200)
perspective(代表下图的d): 视距;
transform: translateZ();代表啊Z
旋转 rotateXYZ()
-
Z 轴:rotateZ() :垂直于电脑屏幕,相当于竹蜻蜓,扇叶是xy轴的平面,竹柄垂直于屏幕。
<style> .box { width: 300px; margin: 100px auto; } img { width: 300px; transition: all 2s; } .box img:hover { transform: rotateZ(360deg); } </style> <div class="box"> <img src="./images/hero.jpeg" alt="" /> </div>
-
X 轴:rotateX() 相当于竹蜻蜓,扇叶是xz轴的平面,竹柄是屏幕水平方向。
<style> .box { width: 300px; margin: 100px auto; } img { width: 300px; transition: all 2s; } .box { /* 透视效果:近大远小,近实远虚 */ perspective: 1000px; } .box img:hover { transform: rotateX(60deg); transform: rotateX(-60deg); } </style> <div class="box"> <img src="./images/hero.jpeg" alt="" /> </div>
-
Y 轴:rotateY() 相当于竹蜻蜓,扇叶是yz轴的平面,竹柄是屏幕垂直方向。
<style> .box { width: 300px; margin: 100px auto; } img { width: 300px; transition: all 2s; } .box { /* 透视效果:近大远小,近实远虚 */ perspective: 1000px; } .box img:hover { transform: rotateY(60deg); transform: rotateY(-60deg); } </style> <div class="box"> <img src="./images/hero.jpeg" alt="" /> </div>
左手法则
作用:根据旋转方向确定取值正负
使用:左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向
旋转rotate3d()
- rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度,(四个参数全是必选参数)
- x,y,z 取值为0-1之间的数字
立体呈现(transform-style)
作用:设置元素的子元素是位于 3D 空间中还是平面中
属性名:transform-style
属性值:
- flat:子级处于平面中
- preserve-3d:子级处于 3D 空间
案例-3d导航
案例步骤:
- 搭建立方体
- 绿色是立方体的前面
- 橙色是立方体的上面
- 鼠标悬停,立方体旋转
.nav li {
position: relative;
width: 100px;
height: 40px;
line-height: 40px;
transition: all 0.5s;
transform-style: preserve-3d;
/* 为了看到橙色和绿色的移动过程,给立方体添加旋转 */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
.nav li a {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #fff;
}
/* 立方体每个面都有独立的坐标轴,互不影响 */
.nav li a:first-child {
background-color: green;
transform: translateZ(20px);
}
.nav li a:last-child {
background-color: orange;
transform: rotateX(90deg) translateZ(20px);
}
.nav li:hover {
transform: rotateX(-90deg);
}
案例筛子
缩放
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();
02-动画animation
- 过渡:实现两个状态间的变化过程
- 动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
动画实现步骤
- 定义动画
/* 方式一 */
@keyframes 动画名称 {
from {}
to {}
}
/* 方式二 */
@keyframes 动画名称 {
0% {}
10% {}
......
100% {}
}
- 使用动画
animation: 动画名称 动画花费时长;
复合属性
提示:
- 动画名称和动画时长必须赋值
- 动画时长必须加单位否则无效
- 取值不分先后顺序
- 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
拆分写法animation-play-state()
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* linear:匀速 */
animation: change 1s linear;
/* steps:分步动画,工作中,配合精灵图实现精灵动画 */
animation: change 1s steps(3);
/* 如果有两个时间,第一个是动画时长,第二个是延迟时间 */
animation: change 1s 2s;
/* 重复次数,infinite:无限循环 */
animation: change 1s 3;
animation: change 1s infinite;
/* alternate:反向 */
animation: change 1s infinite alternate;
/* 动画执行完毕时的状态, forwards:结束状态; backwards:开始状态(默认) */
animation: change 1s forwards;
animation: change 1s backwards;
}
.box:hover {
/* 暂停动画 动画在谁身上,就给他的鼠标悬停伪类加animation-play-state: paused;*/
animation-play-state: paused;
}
/* 宽度 从 200 变化到 800 */
@keyframes change {
from {
width: 200px;
}
to {
width: 800px;
}
}
</style>
<div class="box"></div>
多组动画
animation:
动画一,
动画二,
... ...
;
<style>
div {
width: 140px;
height: 140px;
border: 1px solid #000;
background-image: url(./bg.png);
animation:
move 0.5s steps(12) infinite,
run 3s linear forwards;
}
@keyframes move {
from {
background-position:url(./bg.png) 0 0;
}
to {
background:url(./bg.png) -1680px 0;
}
}
@keyframes run {
from {
transform: translate(0);
}
to {
transform: translate(800px);
}
}
</style>
<div></div>