一.空间转换

属性

transform

语法

transform:translate3d(x,y,z)

透视属性

perspective(添加给父级)视距，指人眼到屏幕的距离

取值

像素单位，数一般在800-1200

空间旋转（绕各个坐标轴转）

transform:rotateZ(值)
transform:rotateX(值)
transform:rotateY(值)

立体呈现

transform-style:preserve-3d；
使子集处于真正的3d空间
默认flat，表示子元素处于2d空间

旋转的盒子（案例）

先定位到一起，然后把后面的transform:rotateX(90deg),再transform:rotateZ(25px)
因为Z轴是视线方向，只有俯视看才能看到，所以要把橙色盒子向上移动，需要调整Z轴
最后再把绿盒子transform:rotateX(-90deg) 然后整体hover时把绿、橙两盒子都transform:rotateX(-90deg)

html：

<div class="box"><ul><li> <a href="">首页</a> <a href="">index</a></li><li> <a href="">登录</a> <a href="">login</a></li><li> <a href="">注册</a> <a href="">register</a></li></ul></div>

css：

*{margin: 0;padding: 0;}li{list-style: none;}.box{width: 300px;margin: 50px auto;position: relative;/*  */}a{text-decoration: none;color: #fff;}.box li{float: left;position: relative;background-color: green;width: 100px;height: 50px;text-align: center;line-height: 50px;font-size: 18px;transform-style: preserve-3d;transition: all .2s;}.box li a{position:absolute;display: block;width: 100px;height: 50px;}.box li a:first-child{transform: translateZ(25px);}.box li a:last-child{background-color: orange;transform: rotateX(90deg) translate3d(0,0,25px);}.box li:hover{transform: rotateX(-90deg);}

空间缩放

transform:scaleX\Y\Z(倍数)

二.动画

多个状态的变化过程用动画，动画过程可控。

实现：1、定义动画 2、使用动画

1.定义动画

@keyframes 名字{from{}to{}
}

第二种多个状态时

@keyframes name{xx%xx%xx%
}

2.使用动画

animation：动画名+时间；
放在需要用动画的标签里。

动画属性

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

速度曲线：

1.linear 匀速
2.steps（数字）:把动画分成几步完成

延迟时间

让动画等一会再执行

重复次数

数字表示重复几次
无限循环 infinite

动画方向

alternate 反复

执行结束时状态

backwards 动画停留在开始状态默认值
forwards 动画停留在结束时的状态

精灵动画

1.盒子的尺寸是每一张精灵小图的尺寸
2.改变背景图的位置
3.steps（精灵小图的个数）

！动画开始状态和盒子默认样式相同时，可以省略动画的开始状态

走马灯

把最初显示的图片粘贴在整张图最后，等转到最后时再从头再来。
整个图片一起挪，挪父级ul。注意ul的尺寸和挪动的距离。

案例

全民出游
1.如果图的高度没有浏览器高度

html{height:100%;
}
body{height:100%;background-size:cover;//cover完全覆盖 contain当宽或高和盒子一边大了 剩下那个就不再缩放了
}

代码

css

*{margin: 0;padding: 0;
}
html{height: 100%;
}
body{position: relative;height: 100%;background: url(./images/f1_1.jpg) no-repeat center 0;background-size: cover;
}
.cloud{animation: cloud 2s infinite linear forwards alternate;
}
.cloud img:nth-child(1){position: absolute;top: 20px;left: 800px;
}
.cloud img:nth-child(2){position: absolute;top: 100px;left: 1400px;
}
.cloud img:nth-child(3){position: absolute;top: 200px;left: 400px;
}
.balloon{animation: balloon 2s infinite linear forwards alternate;
}
.balloon img{position: absolute;top: 200px;left: 600px;
}
.deer img{position: absolute;top: 200px;left: 1050px;
}
.label img:nth-child(1){position: absolute;top: 780px;left: 482px;animation: label .5s infinite linear forwards alternate;
}
.label img:nth-child(2){position: absolute;top: 780px;left: 820px;animation: label .5s infinite .1s linear forwards alternate;
}
.label img:nth-child(3){position: absolute;top: 780px;left: 1160px;animation: label .5s infinite .2s linear forwards alternate;
}
.label img:nth-child(4){position: absolute;top: 780px;left: 1495px;animation: label .5s infinite .3s linear forwards alternate;
}
@keyframes cloud{to{transform: translateX(20px);}
}
@keyframes balloon{to{transform: translateY(-50px);}
}
@keyframes label{to{transform: translateY(-20px);}
}

HTML

<!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><link rel="stylesheet" href="./index.css">
</head>
<body><!-- 云 --><div class="cloud"><img src="./images/yun1.png" alt=""><img src="./images/yun2.png" alt=""><img src="./images/yun3.png" alt=""></div><div class="balloon"><img src="./images/san.png" alt=""></div><div class="deer"><img src="./images/lu.png" alt=""></div><div class="label"><img src="./images/1.png" alt=""><img src="./images/2.png" alt=""><img src="./images/3.png" alt=""><img src="./images/4.png" alt=""></div>
</body>
</html>

CSS的补充（3 空间转换动画）相关推荐

2.css动画(空间转换,动画)
1空间转换使用transform属性实现元素在空间内的位移.旋转.缩放等效果空间:是从坐标轴角度定义的.x .y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同. 空间转换也叫3D转换 ...
【CSS3】平面转换空间转换动画
目录平面转换平移缩放倾斜旋转 transform复合属性空间转换空间位移空间旋转呈现立体图形空间缩放动画动画属性 steps逐帧动画多组动画平面转换 CSS3中动画效果包括 ...
CSS高级功能—3D空间转换（位移、透视、空间旋转）—3D导航—3D缩放
一.空间(3D)转换目标:使用transform属性实现元素在空间内的位移.旋转.缩放等效果. 属性:transform (1)位移效果(Z轴方向需要配合perspective透视使用) 空间位移的 ...
CSS技巧：背景图转换动画
主要借助了 mask-image,一张图片上应用 mask-image: linear-gradient(0, rgba(0, 0, 0,1) 40%, transparent 60%);,透明的部分 ...
CSS 空间转换3D和动画
空间转换3D 3D坐标系一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D位移完整写法 tr ...
CSS空间转换和动画
一.空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大, ...
CSS——空间转换和动画
一.空间转换空间:x.y.z三个坐标轴,z轴和用户的视线在一条直线上,z轴的正轴指向用户自己:空间转换也叫3D转换:(不是网页开发重点.因为目前设计师追求简洁风,空间转换用得少) 属性:transf ...
浅学一点空间转换3D和动画知识
一 . 空间转换3D 3D坐标系 3D坐标系比2D多了一个Z轴. 一定要记住3个坐标轴取值的正反: X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是 ...
CSS转换动画与移动web
CSS转换与移动web 一.课前导学 1.阶段目标: 使用字体图标.平面转换.动画等C3属性丰富网页效果和呈现方式 2.CSS3 目标:使用平面.空间转换和动画属性,丰富网页元素 3.Flex 了解移 ...

CSS的补充（3 空间转换动画）

一.空间转换

属性

语法

透视属性

取值

空间旋转（绕各个坐标轴转）

立体呈现

旋转的盒子（案例）

空间缩放

二.动画

实现：1、定义动画 2、使用动画

1.定义动画

2.使用动画

动画属性

精灵动画

走马灯

案例

代码

css

HTML

CSS的补充（3 空间转换动画）相关推荐

最新文章

热门文章

CSS的补充（3 空间转换 动画）

一.空间转换

属性

语法

透视 属性

取值

空间旋转（绕各个坐标轴转）

立体呈现

旋转的盒子（案例）

空间缩放

二.动画

实现：1、定义动画 2、使用动画

1.定义动画

2.使用动画

动画属性

精灵动画

走马灯

案例

代码

css

HTML

CSS的补充（3 空间转换 动画）相关推荐

最新文章

热门文章

CSS的补充（3 空间转换动画）

透视属性

CSS的补充（3 空间转换动画）相关推荐