transform

最新推荐文章于 2024-12-05 19:41:11 发布

~瑞~

最新推荐文章于 2024-12-05 19:41:11 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/lr13567/article/details/106859817

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS中的transform属性，包括translate、translateX、translateY、rotate、scale等方法的使用，解释了如何通过这些方法实现元素的位置移动、旋转及缩放效果，并提及了兼容不同浏览器引擎的写法。

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

transform的使用方法

	translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
    translateX 只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置
    translateY 
    只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置

    改变元素基点 tranform-origin

    rotate：通过指定的角度参数对原元素指定一个效果
    如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转

    缩放scale  默认值是1，它的值放大是比1大，缩小比1小
    scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
    scaleX(n) 定义 2D 缩放转换，改变元素的宽度
    scaleY(n) 定义 2D 缩放转换，改变元素的高度
    
	-webkit-transform:scaleX(1.5);  /*兼容-webkit-引擎浏览器*/
    -moz-transform:scaleX(1.5);     /*兼容-moz-引擎浏览器*/