3D转换和flex布局
重点掌握flex布局，因为它真的真的很重要！！！
速度曲线之步长
在动画中，animation-timing-fuction用于指定速度曲线，这里介绍一个比较实用的属性steps
速度曲线的属性：
语法：steps（x），x表示数字
实际上步长就是我们这个动画花多少步来完成，可以用来做一些好玩的动画效果（比如大熊的奔跑案例）
3D转换
1.3D移动translate3d
3d相对于2d来说就是多了一个z轴，可以想象z轴就是对着我们眼睛的方向
3d移动的语法：
这里我们可以试着把某一个元素沿z轴移动，但这个效果并不会呈现（因为没有加透视），透视下面会讲。
注意：translate3d（x,y,z）中的xyz不能省略，没有咱就写0
2.透视perspective
透视实际上就是近大远小的一种呈现，跟美术里面经常讲的透视可以说是一个概念
下图中d是视距，当d变小时，我们所看到的物体就会变大，如下：
当d变大时，我们所看到的图像就会变小，见下：
一些关于透视的概念：
注意：透视是写在父盒子里的
下面举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body {
perspective: 500px;
} */
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate3d(400px, 100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
当我们让这个粉色的盒子分别在xyz轴上移动后显然我们没有看到在z轴的变化
但当我们给父元素加上透视后
body {
perspective: 500px;
}
很明显盒子变大了，而当透视越小时，图片就会变的更大（距离元素越近）
3.translatez
从上面的透视我们可以知道，其实z轴也可以改变元素的大小，当z轴上的值越大时（朝向我们眼睛的位置），我们看到的物体越大
4.3D旋转rotate3d
rotatex就是沿着x轴进行旋转，图一就是rotatex，其中rotatex的正负遵守左手法则
rotatey就是沿着x轴进行旋转，图一就是rotatey，其中rotatey的正负也遵守左手法则
而rotatez就更简单了，因为他是沿着z轴，所以他的旋转就类似我们2d的顺时针旋转
transform：rotate3d(x,y,z,deg)这个参数中是按照矢量的法则来定义的
上面第一个表示沿着x轴旋转45度，第二个表示沿着x轴旋转45度
而也可以同时沿着x，y轴，这样的话就沿着想xy的矢量合成线旋转了
5.3D呈现transform-style
简单来说，这个属性就是控制父元素里面的子元素的3d效果呈现的
当我们注释掉box里面的这个属性时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
/* 给块级元素设置居中时宽度不能省 */
margin: 100px auto;
/* transform-style: preserve-3d; */
transition: all .4s;
}
.box:hover {
transform: rotateY(180deg);
}
.first {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
.last {
position: absolute;
width: 200px;
height: 200px;
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div class="first"></div>
<div class="last"></div>
</div>
</body>
</html>
可以看到，里面的两个元素根本没有3d效果，反而更像是一个平面
下面我们加上这个属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
/* 给块级元素设置居中时宽度不能省 */
margin: 100px auto;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover {
transform: rotateY(180deg);
}
.first {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
.last {
position: absolute;
width: 200px;
height: 200px;
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div class="first"></div>
<div class="last"></div>
</div>
</body>
</html>
这样一来，3d效果就出来了
flex布局
1.flex布局体验
简单来说，传统布局更适合pc端，而flex布局更适合移动端（当然如果不考虑兼容性问题pc也可以用）
2.flex布局原理
一句话来说就是给父元素设置flex属性，从而完成子元素的排列方式
3.flex布局中六个父级属性
首先在这里讲一下主轴和侧轴：
简单的说在二维坐标系中，当我们设置x为主轴时，那么y轴就是侧轴，y为主，x就为侧
顾名思义，父级属性就是指定在父级元素中的
3.1flex-direction
用于设置主轴的方向
3.2justify-content
用于定义元素在主轴上的排列方式
3.3flex-warp
你会发现当我们在父盒子中添加多个子盒子时，他会缩小盒子的面积而使盒子在一行显示，这就是因为flex-wrap的影响
3.4align-items
用于设置单行元素在侧轴上的排列方式
3.5align-content
用于设置多行元素在侧轴上的排列方式
注意：在单行情况下，这种属性是没有效果的
3.6flex-flow
相当于flex-direction和flex-warp的合写
语法：
4.flex布局中三个子级属性
顾名思义，子级属性当然写在子级元素中
4.1align-self
align-self用于设置子元素与其他元素在侧轴上不同的排列方式
他的属性值是和align-items一样的
4.2flex
用于定义子元素分配剩余空间
也很好理解，不多讲，看代码和图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section {
display: flex;
width: 70%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
p {
display: flex;
width: 70%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
span {
flex: 1;
}
span:nth-child(2) {
flex: 2;
background-color: hotpink;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
4.3order
用于设置子元素排列的先后位置
语法：
order： -1；（也可以跟其他数值）
默认是0，元素值越小，排名越靠前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: flex;
width: 70%;
height: 150px;
background-color: pink;
/* align-items: flex-end; */
}
span {
width: 100px;
height: 100px;
background-color: purple;
}
span:nth-child(2) {
order: -1;
}
span:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
这种情况下，元素是这样排列的
而当我们给二号盒子添加上这个属性时
span:nth-child(2) {
order: -1;
}
可以看到，2号盒子跑到了1号的前面
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
