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

一.空间转换

属性

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>