CSS 2D动画转换和过度

最新推荐文章于 2023-01-31 10:43:56 发布

pipiyuanyuan

最新推荐文章于 2023-01-31 10:43:56 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/pipiyuanyuan/article/details/125450670

本文深入解析CSS的2D转换功能，包括translate移动、rotate旋转、scale缩放和skew倾斜，并介绍过渡效果的transition属性，如duration、delay和timing-function的用法，带你领略视觉动态的魔法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 动画2D转换和过度

转换（transform）

1.translate() 移动

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

transform: translateX(10px);/*平移x轴距离左边10px*/
transform: translateY(10px);/*垂直上下移动y轴距离上面 10px*/
transform: translate(10px,10px);/*复合属性 第一个值表示x轴 第二个表示y轴*/

2.rotate() 旋转

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

transform: rotate(20deg);/*表示顺时针旋转20度，负值为逆时针旋转*/
transform: rotateX(20deg);/*表示x轴垂直旋转20度*/
transform: rotateY(20deg);/*表示y轴横向旋转20度 */

3.scale() 缩放

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：1为默认大小。

transform: scale(2);/*复合属性，第一个值为x轴，逗号隔开第二个值为y轴，写一个值代表两个轴*/
transform: scaleX(3);/*表示x轴放大三倍*/
transform: scaleY(2);/*表示y轴放大两倍*/

4.skew() 倾斜

倾斜函数，取值是一个度数值。

transform: skew(20deg,30deg);/*复合属性，同时x轴、y轴*/
transform: skewX(20deg);/*表示x轴倾斜20度*/
transform: skewY(30deg);/*表示y轴倾斜30度*/

注：skew会改变形状，rotate不会改变

过渡（transition）

1.transition-property

指定过渡的属性。 all为指定所有属性都有过渡效果。（必须填写的属性）

transition-property: all; //必填属性

2.transition-duration

过渡的时间，单位可以是s或者ms。（必须填写的属性）

transition-duration: 3s; //过度时长，可以填写秒S，或毫秒MS

3.transition-delay

指定过渡生效的延迟时间

transition-delay: 2s;

注：此意思

为单个属性间隔，如果多个间隔为2s如下：

.box1{
    transition-delay:2s;
}
.box2{
    transition-delay:4s;
}
.box2{
    transition-delay:6s;
}

4.transition-timing-function:

linear 规定以相同的速度开始至结束的过渡效果
ease 规定慢速开始，如何变快，然后慢速结束（默认值）
ease-in 规定慢速开始的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
ease-out 规定以慢速结束的过渡效果

ease、ease-in、ease-out、ease-in-out的区别