# 2D转换模块 transform(旋转/缩放/平移)
# 形变中心 transform-origin
# 旋转轴向 transform
# 透视 perspective
# 阴影 box-shadow
# opacity属性(不透明度)
# 动画模块 animation
# 动画模块-其他属性
# 动画模块-云层动画
# 3D转换模块 transform-style: preserve-2d/preserve-3d
infinite 无限的
alternate 往返的
旋转:
transform: rotate(10deg)
平移:
transform: translate(X轴px,Y轴px);
缩放:
transform: scale(水平倍数, 垂直倍数);
如果取值为1,代表不变
如果取值大于1就是放大,小于1就是缩小
如果水平方向和垂直方向缩放倍数一样,那么可以缩写为一个参数
综合:
transform: 第一个参数 第二个参数 第三个参数;
注意点:
1.如果需要进行多个转换,那么用空格隔开
2.如果先旋转再平移,平移方向会变成旋转的那个方向(原因:旋转会改变其原有的坐标系)
形变中心transform-origin:
默认情况下所有的元素都是以自己的中心点作为参考点来旋转的,我们可以通过形变中心点属性来修改它的参考点
transform-origin: x,y;
取值有三种形式:
1.具体像素
2.百分比
3.特殊关键词:center/left/right/top/bottom
旋转轴向transform
transform: rotateZ(45deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
默认情况下,都是围绕Z轴旋转
想围绕哪个轴转,那就在rotate后面加上大写的轴名
什么是透视?
近大远小
perspective: 数值px;
注意点:
一定要注意,透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
如何给盒子添加阴影?
box-shadow:水平偏移px 垂直偏移px 模糊度px 阴影扩展px 阴影颜色 内外阴影outset/inset;
注意点:
1.盒子的阴影分为内外阴影,默认情况下就是外阴影
2.快速添加盒子的阴影最少只需要添加三个参数即可,水平偏移px 垂直偏移px 模糊度px
3.默认情况下盒子的阴影是盒子内容的color
如何给文字添加阴影?
text-shadow: 水平偏移,垂直偏移,模糊度,阴影颜色;
注意点:
1.文字阴影阴影颜色默认就是黑色
2.默认情况下盒子的阴影是盒子内容的color
opacity不透明度
0透明~1不透明
1.过渡和动画之间的异同
1.1不同点
过渡必须认为的触发才会执行过渡
动画不需要认为的触发就可以执行动画
1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的属性
过渡和动画都要满足三要素才会有动画效果
1.告诉系统需要执行哪个动画
animation-name: lnj;
3.告诉系统执行动画的时间
animation-duration: 5s;
2.告诉系统我们需要自己创建一个名称叫做lnj的动画
-创建动画动作的第一种方式:
@keyframes lnj{
from {
margin-left: 0;
}
to {
margin-left: 50px;
}
}
-创建动画动作的第二种方式
@keyframes lnj{
0% {
margin-left: 0;
}
100% {
margin-left: 50px;
}
}
动画模块-其他属性
animation-delay 规定动画何时开始,默认为0
animation-timing-function 规定动画的速度曲线,默认是ease
animation-iteration-count 规定动画被播放的次数,默认为1
animation-direction 规定动画是否需要往返动画,默认是normal
取值:
normal 默认取值,执行完毕直接从起点开始
alternate 需返动画,注意:往返算2次,往返往返算4次
animation-play-state 控制动画运行状态
取值:
running 运行
paused 暂停
通过我们的观察,动画是有一定的状态的
等待状态
执行状态
结束状态
animation-fille-mode 规定动画执行时间之外的状态(指定动画等待状态和结束状态的样式)
取值:
none 不做任何改变
forwards 让元素结束状态保持动画保持最后一帧的样式
backwards 让元素等待状态的时候显示动画第一帧的样子
both 让元素等待状态显示动画第一帧的样式,让元素结束状态保持动画最后一帧的样式
动画模块连写格式:
animation: 动画名称 动画时长 动画运动速度 延迟时间 执行次数 是否需要往返动画;
动画模块连写格式的简写:
animation: 动画名称 动画时长;
什么是2D和3D?
2D就是一个平面,只有宽度和高度,没有厚度
3D就是一个立体,有宽度和高度,还有厚度
默认情况下所有的元素都是呈2D展现的
2.如何让某个元素呈3D展现
和头饰一样,想看到某个元素的3D效果,值需要给他的父元素添加一个transform-style属性,然后设置其取值为preserve-3d即可
3D转换模块
transform-style
取值:
preserve-2d
preserve-3d 3d效果
练习: 3D正方体
练习: 3D长方体
快速创建窍门:
1.正方体transform:scale(水平拉伸,垂直不变)
2.把左右两边的面再移动一些
注意点:
缺点是正方体被拉伸,正方体上的子元素也会被拉升
练习:3D播放器(张学友世界巡回演唱会)
注意点:
1.如果动画中和默认样式中同名的属性,会覆盖默认样式中同名的属性
2.在编写动画的时候,固定不变的值写在前面,需要变化的值写在后面
opacity不透明度
0透明~1不透明
特点:子元素也会跟着透明
透明色transparent
border: 2px solid transparent;
animation: move 6s steps(6次数) 0s infinite;