一、transform
1.二维变换
- 移动:translate
/*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
1.如果只有一个参数就代表x方向
2.如果有两个参数就代表x/y方向*/
/*transform: translate(100px);*/
/*transform: translate(400px,500px);*/
/*添加水平或者垂直方向的移动*/
/*transform:translateX(300px);*/
transform:translateY(300px);
- 缩放:scale
/*实现缩放 1指不缩放,>1.01放大 <0.99缩小 参照元素的几何中心
1.如果只有一个参数,就代表x和y方向都进行相等比例的缩放
2.如果有两个参数,就代表x/y方向*/
/*transform: scale(2);*/
/*transform: scale(2,1);*/
/*缩放指定的方向 */
/*transform:scaleX(0.5);*/
transform:scaleY(0.5);
- 旋转:rotate
/*设置旋转轴心
1.x y
2.关键字:left top right bottom center*/
transform-origin: left top;
transform:rotate(-90deg);
/*同时添加多个transform属性值*/
transform: translateX(700px) rotate(-90deg);
/*注意:旋转的参数只能有一个值,其他都可以有两个*/
ps:在添加多个transform属性时,一定要写在同一句话里面,不能分开写,因为后面的会把前面的重叠掉;而且一般都是先移动,再旋转,这个在后面制作立方体的时候非常重要
- 使用transform实现任意元素水平&垂直居中
.box{
width: 200px;
height: 200px;
position: absolute;
/*定位的百分比是参照父容器的宽高*/
left: 50%;
top: 50%;
/*使用transform实现元素的居中 百分比是参照元素本身的宽高*/
transform: translate(-50%,-50%);
}
2.三维变换
- 三维移动:translate3d
/*translate3d(X方向的偏移,Y方向的偏移,Z方向的偏移)*/
/*transform: translate3d(400px,0,0);*/
/*transform: translate3d(400px,400px,0);*/
transform: translate3d(0px,0px,400px);
- 三维缩放:scale3d
/*scale3d(x方向上的缩放,y方向的缩放,z方向的缩放)
>1.01 放大 <0.99 缩小*/
/*transform:scale3d(2,0.5,10);*/
transform:scale3d(1,1,10);
- 三维旋转:rotate3d
/*rotate3d(x,y,z,angle):
x:代表x轴方向上的一个向量值
y:代表y轴方向上的一个向量值
z:代表z轴方向上的一个向量值*/
transform: rotate3d(1,1,1,330deg);
/*前面三个属性值x,y,z是一个空间向量,元素就以这个向量为轴旋转*/
- 让子元素保留3d变换之后的效果,给父元素添加 transform-style: preserve-3d;
- 添加透视景深效果:perspective: 0px; 可以在立方体里面观察这个立方体
- 设置透视的观察角度:perspective-origin: 0px 0px;
3.动画
动画是CSS3中具有颠覆性的特征之一,可通过设置多个关键帧来精确控制一个或一组动画,常用来实现复杂的动画效果.
- 添加动画
/*添加动画效果*/
/*1.animation-name:指定动画名称*/
animation-name: moveTest;
/*2.设置动画的总耗时*/
animation-duration: 2s;
/*3.设置动画的播放次数,默认为1次 可以指定具体的数值,也可以指定infinite(无限次)*/
animation-iteration-count: 1;
/*4.设置交替动画 alternate:来回交替*/
animation-direction: alternate;
/*5.设置动画的延迟*/
animation-delay: 2s;
/*5.设置动画结束时的状态:默认情况下,动画执行完毕之后,会回到原始状态
forwards:会保留动画结束时的状态,在有延迟的情况下,并不会立刻进行到动画的初始状态
backwards:不会保留动画结束时的状态,在添加了动画延迟的前提下,如果动画有初始状态,那么会立刻进行到初始状态
both:会保留动画的结束时状态,在有延迟的情况下也会立刻进入到动画的初始状态*/
animation-fill-mode: both;
/*6.动画的时间函数*/
animation-timing-function: linear;
/*设置动画的播放状态 paused:暂停 running:播放*/
animation-play-state: running;
- 创建动画
/*创建动画*/
@keyframes moveTest {
/*百分比是指整个动画耗时的百分比*/
/*0%{
transform: translate(0,0);
}*/
/*from和0%等价*/
from{
transform: translate(0,0) rotate(45deg);
}
50%{
transform: translate(0,500px);
}
/*100%{
transform: translate(500px,600px);
}*/
/*to和100%等价*/
to{
transform: translate(500px,600px);
}
}
ps:可以通过js控制animation-play-state的值来控制动画的播放状态
二、flex伸缩布局
- 伸缩布局
/*设置父容器为伸缩盒子:会使每一个子元素自动变成伸缩项*/
display: flex;
/*设置子元素的排列方式*/
justify-content: space-around;
/*flex-start:让子元素从父容器的起始位置开始排列*/
/*flex-end:让子元素从父容器的结束位置开始排列*/
/*center:让子元素从父容器的中间位置开始排列*/
/*space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距*/
/*space-around:将多余的空间平均的分页在每一个子元素的两边,造成中间盒子的间距是左右
两边盒子间距的两倍*/
- 伸缩布局属性:flex-flow
/*flex-flow:是flex-wrap和flex-direction的综合
flex-wrap:控制子元素是否换行显示,默认不换行
nowrap:不换行--则收缩
wrap:换行
wrap-reverse:翻转,原来是从上到下,翻转后就是从下到上来排列
flex-direction:设置子元素的排列方向:就是用来主轴方向,默认主轴方向是row(水平方向)
row:水平排列方向,从左到右
row-reverse:水平排列方向,从右到左
column:垂直排列方向,从上到下
column-reverse:垂直排列方向,从下到上*/
flex-flow: row wrap;
- 伸缩布局属性:flow-grow和flex-shrink
/*设置父容器为盒子:会使每一个子元素自动变成伸缩项
当子元素的宽度和大于父容器宽度的时候,子元素会自动平均收缩*/
/*flex-shrink:定义收缩比例,通过设置的值来计算收缩空间
比例值计算 :当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
flex-shrink的默认值为1*/
flex-shrink: 2;/*默认值是1*/
/*当子元素的宽度之和小于父容器宽度时,可以通过flow-grow来扩展子元素的宽度*/
/*flow-grow:可以来扩展子元素的宽度:设置当前元素应该占据剩余空间的比例值
比例值计算 :当前空间的flex-grow/所有兄弟元素的flex-grow的和
flex-grow的默认是0:说明子元素并不会去占据剩余的空间*/
flex-grow: 1;
- 伸缩布局属性align-items:
/*align-items:设置子元素(伸缩项)在侧轴方向上的对齐方式
center:设置在侧轴方向上居中对齐
flex-start:设置在侧轴方向上顶对齐
flex-end:设置在侧轴方向上底对齐
baseline:文本基线*/
align-items:center;
/*设置单个子元素的对齐方式*/
align-self: baseline;
- 伸缩布局属性flex:
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,大多数情况下没必要使用这种语法。一般使用flex: [number];这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例