【过渡效果transition，transform属性】_transform 过渡效果-优快云博客

本文链接：https://blog.youkuaiyun.com/renrenrenrenqq/article/details/122435188

本文详细介绍了CSS3中的过渡transition和变形transform属性。过渡包括transition-property、transition-duration、transition-timing-function和transition-delay，而变形则涵盖2D和3D效果，如translate、rotate、scale、skew及transform-origin等，这些属性极大地提升了网页动态效果和开发者效率。

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

1.过渡效果transition

1.1transition-property属性

transition-property 属性用于指定应用过渡效果的CSS属性的名称。
基本语法格式

transition-property: none | all | property;

属性	描述
none	没有属性获得过渡效果
all	所有属性都将获得过渡效果
property	定义应用过渡效果的CSS属性名称，多个名称之间用逗号分隔

1.2transition-duration属性

transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。
基本语法格式

transition-duration:time;

1.3transition-timing-function属性

transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。
基本语法格式：

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值	描述
linear	指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)
ease	指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。
ease-in	指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）。
ease-out	指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）
ease-in-out	指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。
cubic-bezier(n,n,n,n)	定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间

1.4transition-delay属性

transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。
基本语法格式：

transition-delay:time;

time为正数:过渡动作会延迟触发。
time为负数：过渡动作会从该时间点开始，之前的动作被截断。

1.5transition属性

transition是一个简写属性，用于设置 transition-property,transition-duration,transition-timing-function, 和transition-delay。
CSS 过渡由简写属性 transition 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间。

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: dodgerblue;
        /* transition 简写属性 */
        transition: 1s width, 2s height;
    }

    .box:hover {
        width: 400px;
        height: 400px;
    }
</style>

<body>
    <div class="box"></div>
</body>

注意：
在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration，第二个可以解析为时间的值会被赋值给transition-delay。

2.transform属性

1、无需加载额外的文件。
2、提高了网页开发者的工作效率。
3、提高了页面的执行速度。
在 CSS3 之前，如果需要为页面设置变形效果，需要依赖于图片、Flash或JavaScript 才能完成。 CSS3 出现后，通过 transform属性就可以实现变形效果。 2012年10月， W3C 组织发布了CSS3变形工作草案，这个草案包括了 CSS3 2D变形和CSS3 3D变形。
变形效果：
在这里插入图片描述
基本语法格式：

transform：none | transform-functions;

transform属性的默认值为 none ，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。

2-D变形

平移translate（）

使用translate（）方法能够重新定义元素的坐标，实现平移的效果。
基本语法格式：

transform:translate（x-value,y-value）;

x-value 指元素在水平方向上移动的距离， y-value 指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0 。当值为负数时，表示反方向移动元素。
如：transform:translate(100px,20px): 在这里插入图片描述

旋转rotate

rotate：通过指定的角度参数对原元素指定一个效果。
如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)；
在这里插入图片描述

缩放scale

缩放scale和移动translate是有点相似的，也是有三种情况：下面我们具体来看看这三种情况具体使用方法：
注意：默认值是1，它的值放大是比1大，缩小比1小。
1、scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。

如：transform:scale(2,1.5);
在这里插入图片描述
2、scaleX(n) 定义 2D 缩放转换，改变元素的宽度。

如：transform:scaleX(2):
在这里插入图片描述
3、scaleY(n) 定义 2D 缩放转换，改变元素的高度。

如：transform:scaleY(2):
在这里插入图片描述

扭曲skew

1、skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。

如：transform:skew(30deg,10deg);
在这里插入图片描述
2、skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。

如：transform:skewX(30deg);
在这里插入图片描述
3、skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

如：transform:skewY(10deg);

在这里插入图片描述

中心点transform-origin

变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用 transform-origin属性。
基本语法格式：
transform-origin: x-axis y-axis z-axis;

transform-origin属性包含三个参数，其默认值分别为 50% 50% 0 ，各参数的具体含义如下：
在这里插入图片描述

3-D变形

1、旋转rotate3d()

基本语法格式：
rotate3d(x,y,z,angle);

x、y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0。Angle为要旋转的角度。

注：（以笔记本开合90度为准）整个坐标系原点在左上角，垂直屏幕向外为Z轴，沿屏幕向右方向为X轴，沿屏幕方向向下为Y轴。

2、视距perspective

perspective属性可以简单的理解为视距，主要用于呈现良好的3D透视效果。例如我们前面设置的3D旋转果并不明显，就是没有设置perspective的原因。
基本语法格式：
perspective:参数值;
perspective 属性参数值可以为 none 或者数值（一般为像素），其透视效果由参数值决定，参数值越小，透视效果越突出。