一、空间转换
1.3D转换-位移
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform
语法：
- transform:translate3d(x,y,z);
- transform:translateX(值)
- transform:translateY(值)
- transform:translateZ(值)
取值（正负均可）：
- 像素单位（px）
- 百分比（表示的是自身大小的百分比）
**注意：**Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果（可以给父级添加perspective属性实现透视效果）
透视（perspective）
目标：使用perspective属性实现透视效果
含义：就是眼睛到屏幕的距离
透视的值推荐：800-1200px
- 透视的值越小，眼睛到屏幕的距离就越小，你看到物体变大
- 透视的值越大，眼睛到屏幕的距离就越大，你看到物体变小
注意：透视和3d没有关系
代码展示：
<!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>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
/* 透视 */
/*
含义：就是眼睛到屏幕的距离
透视的值推荐：800-1200px
透视的值越小，眼睛到屏幕的距离就越小，你看到物体变大
透视的值越大，眼睛到屏幕的距离就越大，你看到物体变小
注意：透视和3d没有关系
*/
perspective: 800px;
transition: all 1s;
}
body:hover .box{
/*
3d位移 单独写法
x轴：右正 左负
y轴：上负 下正
z轴：面向于自己的方向为正值 面向于自己的反方向为负值
3d位移 综合写法
语法：transform:translate3d(x轴,y轴,z轴)
*/
/* transform: translateX(100px); */
/* transform: translateY(100%); */
/* transform: translateZ(200px); */
transform: translate3d(100px,100px,200px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.旋转
目标：使用rotate实现元素空间旋转效果
语法：
- transform:rotateX(值)；
- transform:rotateY(值)；
- transform:rotateZ(值)；
- transform:rotate3d(x,y,z,角度)
拓展 ：
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
<!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>Document</title>
<style>
.box{
width: 300px;
height: 200px;
background-color: pink;
}
.box img{
width: 100%;
transition: all 1s;
}
.box:hover img{
/* x轴旋转，正值向上旋转，负值向下旋转 */
/* transform: rotateX(-180deg); */
/* y轴旋转，正值向右旋转，负值向左旋转 */
/* transform: rotateY(180deg); */
/* z轴旋转，正值顺时针旋转，负值逆时针旋转 */
/* transform: rotateZ(-180deg); */
/* 3d旋转综合写法了解：transform:rotate3d(x,y,z,角度)
x,y,z只能取0和1 0表示不围绕这个坐标旋转 1围绕这个坐标旋转
*/
transform: rotate3d(0,1,1,60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/hero.jpeg" alt="">
</div>
</body>
</html>
立体呈现
目标：使用transform-style: preserve-3d呈现立体图形
实现方法 ：
- 添加 transform-style: preserve-3d;
- 使子元素处于真正的3d空间
- 默认值flat, 表示子元素处于2D平面内呈现
使用立体呈现实现3d导航效果
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
margin: 20px auto;
}
.box {
width: 1200px;
}
.box ul li {
position: relative;
width: 120px;
height: 60px;
/* background-color: pink; */
/* 在父盒子内开启3d模式 */
transform-style: preserve-3d;
transition: all 2s;
}
.box li:hover {
transform: rotateX(-90deg);
}
.box ul li span {
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 18px;
color: #fff;
}
.box ul li span:first-child {
background-color: green;
transform: translateZ(20px);
}
.box ul li span:last-child {
background-color: orange;
transform: translateY(-30px) rotateX(90deg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<span>首页</span>
<span>index</span>
</li>
</ul>
</div>
</body>
</html>
3.缩放
目标：使用scale实现空间缩放的效果
语法：
- transform: scaleX(倍数);
- transform: scaleY(倍数);
- transform: scaleZ(倍数);
- transform: scale3d(x,y,z);
取值：单个属性值写法，取值1以下缩小，1以上放大，1表示不变，也可以设置负值
<!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>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
}
.box:hover{
/* 3d 缩放 单个属性值写法 取值1以下缩小 1以上放大 1表示不变 也可以设置负值 */
/* scaleX 可以理解为盒子的宽 */
/* transform: scaleX(2); */
/* scaleY 可以理解为盒子的高 */
/* transform: scaleY(2); */
/* scaleX 可以理解为面向自己的方向在进行放大，需要把盒子进行旋转 */
/* transform: scaleZ(10) rotateX(90deg); */
/* 缩放的综合写法：transform:scale3d(x,y,z);值为倍数 */
transform: scale3d(2,2,2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、动画
1.动画使用
目标：使用animation添加动画效果
实现步骤：
1.定义动画
方法1：
@keyframes 动画名{
from{}
to{}
}
/* 从from开始，到to结束 */
方法2：
@keyframes 动画名{
0%{}
10%{}
15%{}
100%{}
/* 0%{}相当于from{} */
/* 100%{}相当于to{} */
}
2.使用动画
animation:动画名 执行时间;
代码展示：
第一种定义方式
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 2.调用动画 animation:动画名 执行时间;*/
animation: move 2s;
}
/*
1.定义动画：
@keyframes move{
from{}
to{}
}
从from开始，到to结束
*/
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(800px, 0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
第二种定义方式
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
animation: turn 3s;
}
@keyframes turn {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(800px, 0);
}
50% {
transform: translate(800px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
2.动画属性
目标：使用animation相关属性控制动画执行过程
注意：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
常用属性有：
动画的速度（linear）
循坏次数（infinite无限循环）
动画的方向（alternate反向执行）
动画完毕状态(默认结束状态在起点backwards)
注意点1：infinite循环次数和方向alternate一般搭配使用
animation:turn 2s infinite alternate;
注意点2：infinite循环次数，infinite循环次数，无法和结束状态forwards一起使用（会直接结束）
animation:turn 2s infinite forwards；
3.实现逐帧动画
- 逐帧动画。开发中，一般配合精灵图实现动画效果。
- 在调用中加上steps(N)，将动画过程分成N份。
使用逐帧动画实现，小人跑步的效果：
<!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>Document</title>
<style>
.box{
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(./images/bg.png);
/* 补间动画 */
/* animation: run 1s infinite */
/* 逐帧动画 */
animation: run 1s infinite steps(12),move 5s forwards linear;
}
@keyframes run{
0%{
background-position: 0 0;
}
100%{
background-position: -1680px 0;
}
}
/* 移动盒子的动画 */
@keyframes move{
0%{
transform: translate(0,0);
}
100%{
transform: translate(1000px,0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
