3D变换
3D变换：指基于3d立体的角度来设置盒子。
perspective:1200px;
/* 在父元素中使用，设置景深（一般上景深设置越大，立体效果越好） */
perspective-origin:50% 50%;
/* 设置浏览器器的立体中心体 */
transform-style:preserve-3d;
/* 表示在3D空间中展示 */
3D旋转：指让盒子绕着x轴或y轴进行旋转
transform:rotateX(旋转的角度);
/* 绕着x轴旋转多少角度 */
transform:rotateY(旋转的角度);
/* 绕着y轴旋转多少角度 */
transform:rotateZ(旋转的角度);
/* 绕着z轴旋转多少角度 */
3D平移：指让盒子在水平方向或垂直方向进行移动
transform:translateX(像素值);
/* 水平方向移动，正值向右，负值向左 */
transform:translateY(像素值);
/* 垂直方向移动，正值向下，负值向上 */
transform:translateZ(像素值);
/* z轴方向移动，正值距离眼睛更近，负值距离眼睛更远 */
transform:translate3d(水平方向像素值，垂直方向像素值，z轴方向像素值);
/* 复合写法 */
<style>
.box{
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 50px auto;
position: relative
/* 设置3d属性 */
perspective: 1200px;
perspective-origin: 50% 50%;
transform-style:preserve-3d;
transition: all 5s;
/* transform: rotateY(45deg) rotateX(45deg); */
}
.box>div{
width: 100px;
height: 100px;
position:absolute;
opacity: 0.5;
font-weight: bold;
font-size: 50px;
text-align: center;
line-height: 100px;
}
.box1{
background-color: #f00;
left:0;
top: 100px;
transform-origin: right;
transform: rotateY(90deg);
}
.box2{
left: 100px;
top: 0;
background-color: #0f0;
transform-origin: bottom;
transform: rotateX(-90deg);
}
.box3{
background-color: #00f;
left: 100px;
top: 100px;
}
.box4{
background-color: #ff0;
left: 100px;
top: 100px;
transform: translateZ(100px);
}
.box5{
top: 200px;
left: 100px;
background-color: #0ff;
transform-origin: top;
transform: rotateX(90deg);
}
.box6{
left: 200px;
top: 100px;
background-color: #000;
color: #fff;
transform-origin: left;
transform: rotateY(-90deg);
}
.box:hover{
transform: rotateY(180deg) rotateX(360deg);
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
动画
一，概念
定义多个关键帧，组成完整的复杂动画，用多个过渡效果组成的效果。
二，自定义帧格式
@keyframes 动画名称{
0%{
样式
}
25%{
样式
}
100%{
样式
}
}
三，使用属性
1、单一写法
animation-name:动画名称animation-duration:动画时长animation-delay:延迟时间- 时间单位：
- 数字s 代表表示秒
- 数字ms 代表表示毫秒
- 1s=100ms
- 时间单位：
animation-timing-function:速度方式animation-iteration-count:数字（表示播放次数）- infinite 表示为无限次
animation-fill-mode:是否停在结束位置或者开始位置- forwards 结束位置
- none 开始位置
animation-direction:是否倒回来- normal：表示不倒回来，一次结束后，重新开始
- alternate：表示奇数次是正向，偶数次是反向
animation-play-state:是否暂停或运行- paused 暂停
- running 正在运行
2、复合写法
animation：动画名称 动画时长 延迟时间 速度方式 播放次数 是否停在结束位置 是否倒回来 是否暂停或播放
渐变
一，线型渐变
background-image:linear-gradient(to 方向，颜色，颜色，...)background-image:repeating-linear-gradient(to 方向，颜色 百分比，颜色 百分比，...)[可做重复线性渐变]
可以直接使用background来实现
/*斑马线*/
<style>
.box{
width: 500px;
height: 200px;
border: 3px solid #000;
background-image:repeating-linear-gradient(to right,#999 0,#999 5%,while 5%,while 10%);
</style>
<body>
<div class="box"></div>
</body>
二，径向渐变
background-image:radial-gradient(扩散范围 at 圆心x 圆心y 形状，颜色颜色，...)background-image:repeating-radial-gradient(扩展范围 at 圆心x 圆心y 形状，颜色 百分比，颜色 百分比，...)
设置形状
circle 圆形
不写默认为椭圆
渐变范围
closest-side 最近的边
closest-corner 最近的角
farthest-side 最远的边
farthest-corner 最远的角
网格布局：将一个盒子划分为多个单元格
容器属性
一，声明网格布局
display:grid将元素转为网格块元素display:inline-grid将元素转为行内网格块元素
二，划分行和列
属性
grid-template-rows设置网格的 行属性grid-template-columns设置网格的 列属性
属性值
-
多个像素值
- grid-template-rows:100px 100px 100px;
-
多个百分比
- grid-template-rows:25% 25% 25% 25%;
-
使用repeat(重复次数，像素或百分比)
- grid-template-rows:
repeat(3,100px); - grid-template-rows:
repeat(3,33.3%); - grid-template-rows：
200px repeat(3,100px);
- grid-template-rows:
-
使用repeat(auto-fill,像素值或百分比)[自动划分5份]
- grid-template-rows: repeat(auto-fill, 20%);
-
用多个fr布局
- grid-template-rows:3fr 2fr 1fr;
-
用minmax（最小值，最大值）
- grid-template-rows:50px 100px minmax(250px,280px)
- 如果盒子剩余的值小于250px，则表达出来的值是 250px,超出的部分会把盒子挤开
- 如果盒子剩余的值大于280px，则表达出来的值只会是 280px
-
多个值之间可以使用auto，将剩余距离瓜分
- grid-template-rows:100px auto 100px
三 ,设置单元格之间的间距
1，设置行间距： grid-row-gap:20px
2, 设置列间距： grid-column-gap:30px
3, 间距的复合写法：grid-gap:20px 50px
- 第一个值是表示行元素，第二个值是表示列元素。
四 ,规划单元格排列的方向 grid-auto-flow:column | row;
- column表示纵向排列，row表示横向排列，默认为使用row
五 ,内容在单元格的对齐方式
1 ，水平对齐方式 justify-items:start 居左 | end 居右 | center 居中 | stretch 拉伸（默认值）;
2 ，垂直对齐方式 align-items:start 居上 | end 居下 | center 居中 | stretch 拉伸（默认值）;
3 ，复合写法 place-items: 垂直对齐方式 水平对齐方式
4 ，如果项目设置了宽高的话，默认使用start，会使得默认值 stretch不生效
六 ,网格在容器中的对齐方式
1 ，水平对齐方式 justify-content:start | end | center | stretch;
2 ，垂直对齐方式 align-content:start | end | center | stretch;
3 ，复合写法 place-content: 垂直对齐方式 水平对齐方式
- start： 对齐容器的起始边框
- end：对齐容器的结束边框
- center： 容器的内部居中
- stretch： 项目大小没有指定时，拉伸占据整一个网路容器
- space-around： 每个项目两侧的间隔相等，所以，项目之间的间隔比项目与内容边框的间隙大一倍
- space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔
- space-evenly： 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔;
七 项目属性
grid-column-start: 开始的纵向网格线名称;grid-column-end: 结束的纵向网格线名称;grid-row-start: 开始的横向网格线名称;grid-row-end: 结束的横向网格线名称;- 复合写法
grid-column:grid-column-start/grid-column-end;grid-row:grid-column-start/grid-row-end;
八 设置网格区域分配项目
1 ,给每个单元格命名，且通过名称将多个单元格进行合并
- 相同的名称可以进行合并，但单元格合并必须是有相邻边的网格
grid-template-areas:"" "" ""(给一个三行三列的网格的容器是名称)
- 如果想设置两个相邻的同名网格进行合并，可以在命名的时候，设置为一样的名字，则可以合并
2 ,给当前的项目设置所要占据的区域名称，不需要加引号
grid-area:区域名称（给需要占据区域名称的项目设置）
3，如果有些单元格不放内容，可以使用 . 来描述区域名称，表示无用区域
<style>
.box{
width:600px;
height:600px;
border:1px #000 solid;
margin: 50px auto;
/* 设置网格块元素 */
display:grid;
/* 设置网格变为三行 */
grid-template-rows:repeat(3,200px);
/* 设置网格变为三列 */
grid-template-columns:repeat(3,200px);
/* 给网格命名，不需要的用 点 代替 */
grid-template-areas:
"a a a"
". . b"
". c c";
}
.juchang{
grid-area:a;
/*代入网格名称*/
}
.fang{
grid-area:b;
}
.chang{
grid-area:c;
}
</style>
<body>
<div class="box">
<div class="juchang">
<a href="">
<img width="600" height="200" src="./images/juchang.jfif" alt="">
<!-- 设置宽和高 -->
</a>
</div>
<div class="fang">
<a href="">
<img width="200" height="200" src="./images/fang.jfif" alt="">
</a>
</div>
<div class="chang">
<a href="">
<img width="400" height="200" src="./images/chang.jfif" alt="">
</a>
</div>
</div>
</body>
效果如下：
