平面转换
文章目录
改变盒子在平面内的形态(位移,旋转,缩放)
2D转换
属性:transform
位移
transform:translate(水平移动距离,垂直移动距离)
取值:
像素单位数值
百分比(参照盒子自身的尺寸)
x轴正向为右,y轴正向为下
translate() 只给出一个值 表示x轴移动的距离
单独设置某个方向移动的距离 translateX() translateY()
位移-绝对定位居中
目标:使用translate快速实现绝对定位的元素居中效果
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
width:200px;
height:100px;
旋转
transform:rotate(角度)
角度单位是 deg
取值
正 顺时针旋转
负 逆时针旋转
transform-origin
改变转换原点
默认原点是盒子中心点
transform-origin:原点水平位置 原点垂直位置
取值:
方位名词:(left top bottom center right)
像素单位数值
百分比(参照盒子自身尺寸)
多重转换
transform: translate(600px) rotate(360deg);
原理
- 旋转会改变坐标轴方向
- 先写旋转,后面的转换效果的轴以转换后的轴为准,影响到转换结果
缩放
语法
transform:scale(倍数)
transform:scale(x轴倍数,y轴倍数)
一般情况下scale 设置一个值,表示x轴和y轴是等比例缩放
scale值大于1 表示放大, 小于1 表示缩小
渐变背景
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
background-image: linear-gradient(
transparent,
rgba(0,0,0,.5)
);
空间转换
X,Y,Z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同
空间转换 也叫3D转换
transform
空间位移
transform: translate3d(x,y,z);
transform: translateX(100px);
transform:translateY(100px);
远离眼睛方向 负值
对着眼睛方向 正值
transform: translateZ(-100px);
取值:
正负都可以
像素单位数值
百分比
透视
z轴是视线方向,移动效果是距离的远或近,电脑屏幕是平面的,无法观察远近效果
perspective 实现透视效果
perspective 添加给父级
perspective:值
取值:像素单位数值, 数值一般在800px-1200px
作用:空间转换时,为元素添加近大远小,近实远虚的视觉效果
透视距离也叫视距,就是人的眼睛到屏幕的距离
空间旋转
/* transform: rotateZ(360deg); */
/* transform: rotateX(60deg);
transform: rotateX(-60deg); */
transform: rotateY(60deg);
transform: rotateY(-60deg);
立体呈现
transform-style:preserve-3d
使子元素处于真正的3d空间
左手法则
判断旋转方向:左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向
动画
animation添加动画效果
多个状态之间的变化过程,动画过程可控(重复播放,最终画面,是否暂停)
动画实现步骤
1:定义动画
/* 1:定义动画
@keyframes 动画名称{
from {}
to {}
}
*/
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
2:使用动画
/* 2 使用动画 */
/* animation: 动画名称 动画花费时长; */
animation: change 2s;
动画属性
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了 animation-play-state属性 |
animation-name | 制定需要使用的动画( 必须的 ) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒( 必须的 ) |
animation-timing-function | 规定动画的速度曲线,默认是"ease"”。 |
aniamtion-delay | 规定动画何时开始,默认是0. |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有 infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认是" normal" alternate逆播放 |
animation-fill-mode | 规定动画结束后状态,保持 forwards 回到起始 backwards |
animation-play-state | 规定动画是否正在运行或暂停。默认是" running" 还有’ paused 暂停. |
- 暂停动画: animation-play-state: pulsed;经常和鼠标经过等其他配合使用
- 想要动画走回来,而不是直接跳回来: animation- direction: alternate
- 盒子动画结束后,停在结東位置: animation- fill-mode: forwards
动画名称 动画时长 必须赋值
赋值不分前后顺序
如果有2个时间值,第一个时间表示动画时长,第二个表示动画延迟时间
aniamtion-direction----动画是否逆向播放
aniamtion-direction: norma | reverse | alternate | alternate-reverse
normal 默认的
reverse 从终点运动向起点 终点=>起点
alternate 到达终点后是否原路返回( 起点=>终点=>起点 ) 当 animation-iteration-count < 2 时无效
alternate-reverse 终点=>起点=>终点 animation-iteration-count < 2 时无效
animation-fill-mode----动画结束后状态
-
aniamtion-fill-mode:forwards | backwards
- forwards 保持当前位置
- backwards 回到初始位置
animation-timing- function:规定动画的速度曲线(默认是 ease)
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。匀速 |
ease | 默认。动画以低東开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
steps | 指定了时间函数中的间隔数量(步长) |