css的transform和transition属性

最新推荐文章于 2025-06-09 17:13:55 发布

Gumballs

最新推荐文章于 2025-06-09 17:13:55 发布

阅读量465

点赞数

CC 4.0 BY-SA版权

分类专栏：学习总结

本文链接：https://blog.youkuaiyun.com/wo7024389/article/details/76038039

学习总结专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用CSS的transition属性实现元素过渡效果，并详细解释了transition的四个关键属性。此外，还探讨了transform属性及其多种变换方法，最后展示了transition与transform结合实现动画效果的例子。

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

transition是一个过渡属性，将鼠标放到相应的div元素上，可以实现相应的变化

如：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
}

div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

可以看到，将鼠标放上去后，蓝色模块会进行宽度的变化

它一共有4个过度属性：

transition-property 规定完成过渡效果的css的属性的名称
transition-duration 规定完成过渡效果需要多少秒
transition-timing-function 规定速度效果的速度曲线
transition-delay 定义过渡效果何时开始

请注意：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transform属性可以对相应的元素进行相应的变化。

例：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:rotate(9deg);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

代码的定义就是将一个宽200px高100px的黄色的框旋转9°

如下图

none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

将两种属性合在一块，可以实现一些动画的效果

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

           img{

            transition: all 1s ease-in ;

            }
        img:hover{
            transform: scale(1.5);
        }

   
    </style>
    <title>Transform</title>
</head>
<body>
<img src="img/1.png" alt="""/>
</body>
</html>

该代码可以实现将一个图片在1秒内放大1.5倍