个性化阅读
专注于IT技术分析

CSS 2D转换translate()

本文概述

CSS3支持transform属性。此transform属性有助于你平移, 旋转, 缩放和倾斜元素。

变换是用于更改形状, 大小和位置的效果。

转换有两种类型, 即CSS3支持2D和3D转换。


CSS 2D转换

CSS 2D变换用于将元素的结构更改为平移, 旋转, 缩放和倾斜等。

以下是2D变换方法的列表:

  • 平移(x, y):用于沿X轴和Y轴变换元素。
  • translateX(n):用于沿X轴变换元素。
  • translateY(n):用于沿Y轴变换元素。
  • rotate():用于根据角度旋转元素。
  • scale(x, y):用于更改元素的宽度和高度。
  • scaleX(n):用于更改元素的宽度。
  • scaleY(n):用于更改元素的高度。
  • skewX():它指定倾斜变换以及X轴。
  • skewY():指定与Y轴一起的倾斜变换。
  • matrix():指定矩阵变换。

支持的浏览器

属性 IE浏览器 火狐浏览器 歌剧 苹果浏览器
transform 36.04.0 -webkit- 10.09.0-毫秒- 16.03.5 -moz- 23.0 15.0 -webkit- 12.1 10.5 -o- 9.03.2 -webkit-
transform-origin(二值语法) 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.03.5 -moz- 9.03.2 -webkit- 23.0 15.0 -webkit- 12.110.5 -o-

translate()方法

CSS translate()方法用于根据给定的参数(即X轴和Y轴)将元素从其当前位置移动。

让我们以一个例子来翻译

赞(0) 打赏
未经允许不得转载:srcmini » CSS 2D转换translate()
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏