CSS 2D转换translate()

本文概述

  • 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轴)将元素从其当前位置移动。
【CSS 2D转换translate()】让我们以一个例子来翻译

    推荐阅读