1、空间转换-3D转换
1.1空间平移属性：transform x、y、z构成一个立体空间，z轴位置与视线方向相同
语法：transform:translate3d(x, y, z);
transform: translateX(值)、 transform: translateY(值) 、 transform: translateZ(值)
transform: translateZ(值) Z轴的正方向为屏幕到人的眼睛的方向
1.1.1透视效果(给父元素添加) translateZ需加上透视才能看到效果
透视，视距，景深 设置给使用了3d元素的父元素（亲爸爸）
/* 视距理解：人的眼睛到屏幕的距离 */
用法：perspective: 800px;
添加视距 取值范围：400~1200px pp 只是添加近大远小、近实远虚的效果
image.png
<style>
/* 透视，视距，景深 设置给使用了3d元素的父元素（亲爸爸） */
body {
/* 添加视距 取值范围：400~1200px pp */
perspective: 800px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
transition: all 0.5s;
}
.box:hover {
transform: translateZ(400px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
1.2空间旋转性：rotatae
方向遵循左手法则： 左手握住旋转轴 拇指指向正值方向 手指弯曲方向为旋转正值方向
image.png
注意点：transform: rotateZ(360deg);与 transform: rotate(360deg);等价效果一致
transform: rotateX(60deg); 上边往里倒，高度变小
transform: rotateY(60deg); 右边往里倒，宽度变小
transform: rotateX(45deg) rotateY(60deg) rotateZ(60deg); 连写，用空格隔开
1.2空间缩放性：无缩放
1.3立体呈现
用法：开启3d立体效果 transform-style: preserve-3d; tfs简写
image.png
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
transition: all 2s;
/* 添加视距：仅仅是增加了一个近大远小的效果 */
perspective: 600px;
/* 开启3d立体效果 tfs*/
transform-style: preserve-3d;
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.back {
background-color: green;
}
.front {
background-color: orange;
transition: all 1s;
}
.box:hover {
transform: rotateY(60deg);
}
.box:hover .front{
transform: translateZ(-400px);
}
</style>
</head>
<body>
<div class="box">
<div class="back">后面</div>
<div class="front">前面</div>
</div>
</body>
综合案例：旋转导航(了解)
1、让橙色盒子往上移动60deg 沿着x轴旋转90度
2、绿色盒子往前移动20 沿着Z轴
3、鼠标移入li标签，整个盒子沿着X负方向往下
高度必须要给，如果不给li的高度为80像素 默认的旋转点为盒子的中心点
会导致整个盒子会往下掉20px
旋转导航.gif
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代码
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 300px;
height: 40px;
margin: 50px auto;
}
li {
float: left;
/*
高度必须要给，如果不给li的高度为80像素 默认的旋转点为盒子的中心点
会导致整个盒子会往下掉20px
*/
height: 40px;
list-style: none;
/* 开启3d效果 */
transform-style: preserve-3d;
/* 开启上帝视角旋转 */
/* transform: rotateX(-20deg) rotateY(30deg); */
transition: all 1s;
}
a {
display: block;
width: 100px;
height: 40px;
text-decoration: none;
color: #fff;
text-align: center;
line-height: 40px;
}
li a:first-child {
background-color: green;
/* 2、绿色盒子往前移动20 沿着Z轴 */
transform: translateZ(20px);
}
li a:last-child {
background-color: orange;
/* 1、让橙色盒子往上移动60deg 沿着x轴旋转90度*/
transform: translateY(-60px) rotateX(90deg);
}
/* 3、鼠标移入li标签，整个盒子沿着X负方向往下 */
li:hover {
transform: rotateX(-90deg);
}
</style>
2、动画 animation
用法： 1、定义关键帧动画（用from to或百分比） 2、引用动画
1、@keyframes change {from{} to{}} @keyframes move { 0%{} 50%{}100%{}}
注意点：1、动画的名称不能重复
注意点：2、可参与的动画的CSS属性都可以参与动画
注意点：3、动画名称不能用running 因为是关键词
注意点：4、.如果调用该动画的盒子样式和初始状态的样式是一样的，初始状态可以省略不写
<style>
.box1 {
width: 200px;
height: 100px;
background-color: skyblue;
/* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
animation: change 2s;
}
/* 一. 定义动画：让宽度从200变大到600 */
@keyframes change {
/* 初始状态 */
from{
width: 200px;
}
/* 结束状态 */
to{
width: 600px;
}
}
.box2 {
width: 200px;
height: 100px;
background-color: tomato;
/* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
animation: move 3s;
}
/* 二. 定义动画：200*100 到 500*300 到 800*500 */
/* 1.定义动画 百分比可以实现阶段性的动画 */
@keyframes move {
0%{
width: 200px;
height: 100px;
}
50%{
width: 500px;
height: 300px;
}
100%{
width: 800px;
height: 500px;
}
}
</style>
2.1 animation复合属性
animation属性
2.1.1 速度曲线
记住：linear 匀速——补间动画
记住：step(正整数)——逐帧动画 经常配合精灵图去使用
image.png
2.1.2 延迟时间：
动画开始之间要等待的时间 s/ms
注意点：当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
2.1.3 重复次数
记住：infinite 无限次播放
2.1.4动画方向
记住：alternate 交替播放
2.1.5执行完毕时的状态
记住：forwards 动画会停在动画结束时的状态；
注意点：forwards不能和infinite结合使用，否则不生效
单个属性
案例：精灵图动画
实现步骤：1、使用背景位移实现帧动画动 2、使用定位left实现向右走
精灵图帧动画.gif
<style>
.box {
position: absolute;
left: 0;
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
animation: run 1s steps(12) infinite,
translate 3s linear forwards;
}
@keyframes run {
100% {
background-position: -1680px 0;
}
}
@keyframes translate {
100% {
left: 800px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
案例：无缝切换
考察点：动画、位移切换、无缝切换、鼠标移动上停止动画
无缝切换.gif
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.box {
width: 620px;
border: 10px solid #000;
overflow: hidden;
}
.box ul {
width: 2000px;
animation: move 5s linear infinite;
}
.box:hover ul{
animation-play-state: paused;
}
.box li {
float: left;
}
.box li img {
width: 200px;
vertical-align: middle;
}
@keyframes move {
to{
transform: translateX(-1400px);
}
}
</style>
</head>
<body>
<div class="box">
<!-- ul>li*7>img[src="./images/$.jpg"] -->
<ul>
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
<li><img src="./images/4.jpg" alt="" /></li>
<li><img src="./images/5.jpg" alt="" /></li>
<li><img src="./images/6.jpg" alt="" /></li>
<li><img src="./images/7.jpg" alt="" /></li>
<!-- 放前三张图片，填充空白，无缝切换 -->
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
</ul>
</div>
</body>
~~明天继续努力丫
