transiton和transform的区别

最新推荐文章于 2023-08-30 11:18:54 发布

ssh6666

最新推荐文章于 2023-08-30 11:18:54 发布

阅读量934

点赞数 2

分类专栏：初学者文章标签： css3

本文链接：https://blog.youkuaiyun.com/ssh6666/article/details/104938431

版权

本文介绍了CSS3中的transition和transform属性。transition用于设置元素过渡效果，包括属性名、持续时间、速度曲线和延迟时间。而transform则用于2D/3D转换，包括位移、缩放、旋转和倾斜等操作。transform-origin可以自定义变换的基点。两者结合可以实现平滑的动画效果。

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

初学css，经常被transition和transfor属性搞混。

transition，过渡；
transform，2D/3D转换。

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property–规定设置过渡效果的 CSS 属性的名称
transition-duration–规定完成过渡效果需要多长时间
transition-timing-function–规定速度效果的速度曲线
transition-delay–定义过渡需要等待的时间

所以，transition在设置transition-duration属性的情况下，会产生过渡效果。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2D位移 translate()
将元素向指定的方向移动，类似于position中的relative。
• 水平移动：向右移动translateX(tx)和向左移动translateX(-tx)；
• 垂直移动：向下移动translateY(ty)和向上移动translateY(-ty);
• 对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动
translate(-tx,-ty)和左下角移动translate(-tx,ty)。
2.2D缩放scale()
• 让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，
使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。
• scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值
是1。
• scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值
是１。
• scale(tx,ty):水平方向和垂直方向都放大
3、rotate()
旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
4、skew()
倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
5.旋转基点
transform-origin：top left bottom right center(自己设置需要的基点)；

所以，transform属性只对元素进行变换，不会产生过渡效果。而transtion是让treansform所产生的变换进行过度效果，如：

  <!DOCTYPE html>
<html>
    <head>
        <meta charset

最低0.47元/天解锁文章