首页 前端知识 CSS3 2D变换、3D变换、过渡、动画

CSS3 2D变换、3D变换、过渡、动画

2024-06-24 02:06:24 前端知识 前端哥 698 463 我要收藏

2D位移


2D位移可以改变元素位置,
给元素添加transform转换属性
transform的具体值如下:translateX设置水平方向位移,若指定的是百分比,则参考自身宽度
translateY设置垂直方向位移,若指定的是百分比,则参考自身高度
translate一个值代表水平,一个垂直
注意:
位移对行内元素无效
位移配合定位,可实现元素水平垂直居中

.box{
    position:absolute;
    left:50%;
    right:50%;
    transform:translate(-50%,-50%);
   }

2D缩放,让元素放大或者缩小


给元素添加transform转换属性
transform的具体值如下:
scaleX    设置水平方向的缩放比例,值为一个数字,1表示不缩放,大于1表示放大,小于1表示缩小
scaleY    设置垂直方向的缩放比例,值为一个数字,1表示不缩放,大于1表示放大,小于1表示缩小
scale    同时设置水平,垂直方向,一个值代表水平和垂直方向,两个值一个代表水平,一个代表垂直

2D旋转


transform转换属性
rotate     设置旋转角度,指定一个(deg),正值顺时针,负值逆时针

2D扭曲 元素在二维平面内被拉扯,产生变形
给元素添加transform属性
skewX     设置水平方向上扭曲,值为角度值,将元素的左上角和右下角拉扯
skewY    设置垂直方向上扭曲,值为角度值,将元素的左上角和右下角拉扯
skew    一个值时代表skewX,两个值代表skewX,skewY

多重变换
transform:translate(-50%,-50%) rotate(45deg)
多重变换时建议后旋转

2D变换-变换原点


元素变换时默认原点是元素的中心,使用transform-origin可以设置变换的原点
修改变换原点对位移没有影响,对旋转和缩放会产生影响
如果提供两个值,第一个是横坐标,第二个是纵坐标
如果只提供一个值,若是像素值,表示横坐标,纵坐标取50%;若是关键词,另一个取50%
transform-origin:50% 50%, 变换原点在元素的中心位置,百分比相对于自身----默认值
transform-origin:left   top,原点在左上角
transform-origin:50px 50px,变换原点在左上角50px 50px像素位置
transform-origin:0,只写一个值时,第二个值默认为50%

3D变换


给子元素设置transform属性
重要原则:元素进行3D变换的首要操作,父元素必须开启3D空间
使用transform-style开启3D空间,可选值如下:
flat:让子元素位于此元素的二维平面内(2D空间)---默认值
preserve-3d:让子元素位于此三维空间内(3D空间)

设置景深


产生透视效果,看起来更加立体
使用perspective设置景深,可选这如下
none:不指定透视
长度值:指定观察者z=平面的距离,不允许负值
perspective设置发生3D变换元素的父元素

透视点设置
所谓透视点位置,就是观察者位置;默认透视点在元素的中心
使用perspective-origin设置观察者位置
例子
perspective-origin:400px 300px
相对坐标轴向右偏移400px,向下偏移300px
通常情况下不调整透视点位置
 

3D位移


就是在2D位移的基础上,可以让元素沿z轴位移,具体使用方式如下:
先给元素添加转换属性transform
编写transform的具体值,3D相关可选值如下:
translateZ        设置z轴位移,需要指定长度值,正值向屏幕外,负值向屏幕里,且不能写百分比
translate3d    第1个参数是对应x轴,第2个参数是对应y轴,第3个参数是对应z轴,且均不能省略

3D旋转


就是在2D旋转的基础上,可以让元素沿x轴和y轴旋转,具体使用如下
先给元素添加转换属性transform
编写transform的具体值,3D相关可选值如下
rotateX    设置x轴旋转角度,需指定一个角度值(deg)面对x轴正方向:正值顺时针,负值逆时针
rotateY    设置Y轴旋转角度,需指定一个角度值(deg)面对y轴正方向:正值顺时针,负值逆时针
rotate3d    前三个参数分别表示坐标轴x,y,z,第四个值表示旋转角度,参数不允许省略。
例如:transform:rotate3d(1,1,1,30deg),意思是xyz分别旋转30度

过渡


过渡可以在不适用flash动画,不使用JavaScript的情况下,让元素从一种样式,平滑过渡到另一种样式
1、transition-property
作用:定义哪个属性需要过渡,只有在该属性中定义的属性(比如宽、高、颜色等)才会有过渡效果
常用值:
none:不过渡任何属性
all:过渡所有能过渡的属性

2、transition-duration
作用:设置过渡的持续时间,即:一个状态过渡到另一个状态耗时多久
常用值:
0:没有任何过渡时间-----默认值
s或ms:秒或毫秒

3、transition-delay
作用:指定开始过渡的延迟时间,单位s或ms

4、transition-timing-function
作用:设置过渡类型
常用值:
ease:平滑过渡----默认值
linear:线性过渡
ease-in;慢->快
ease-out:快->慢
ease-in-out:慢->快->慢
step-start:等同于steps(1,start)无视延迟时间,直接过渡
step-end:等同于steps(1,end)最后直接过渡
steps(integer,?)接受两个参数的步进函数,分步过渡,第二个值可以取start或end
cubic-bezie(num,num,num,num)特定的贝塞尔曲线类型

5、transition复合属性
如果设置了一个时间,表示duration;如果设置了两个时间,第一个是duration,第二个是delay;其他值没有顺序
transition:1s 1s linear all;
 

动画的基本使用


第一步定义关键帧
1、简单方式定义:
    写法一:

@keyframs  动画名{
    from{
    /*property1:value1*/
    /*property2:value2*/
    }
    to{
    /*property1:value1*/
    }
}


2、完整方式定义:

@keyframs 动画名{
    0%{
    /*property1:value1*/
    }
    60%{
    /*property1:value1*/
    }
    100%{
    /*property1:value1*/
    }
    }

第二步:给元素应用动画,用到的属性如下:
1、animation-name:给元素具体的动画名
2、animation-duration:设置动画所需时间
3、animation-delay:设置动画延迟时间

animation-timing-function,设置动画类型,常用值如下:
ease:平滑动画---默认值
linear:线性过渡
ease-in:慢->快
ease-out:快->慢
ease-in-out:慢->快->慢
step-start: 等同于steps(1,start)
step-end:等同于steps(1,end)
steps(integer,?)接受两个参数的步进函数,分步过渡,第二个值可以取start或end
cubic-bezie(num,num,num,num)特定的贝塞尔曲线类型

animation-iteration-count,指定动画的播放次数,常用值如下:
number:动画循环次数
infinite:无限循环

animation-direction,指定动画方向,常用值如下:
normal:正常方向(默认)
reverse:反方向运行
alternate:动画正常运行再反方向运行,并持续交替运行
alternate-reverse:动画反运行再正方向运行,并持续交替运行

animation-fill-mode,设置动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态

animation-play-state,设置动画的播放状态,常用值如下:
running:运动(默认)
paused:暂停

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13389.html
标签
评论
发布的文章

JMeter断言之JSON断言

2024-07-22 01:07:18

39 | XML、JSON、YAML比较

2024-07-22 01:07:13

String和JSON相互转换

2024-07-22 01:07:11

npm 安装报错

2024-07-22 01:07:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!