美文网首页
transform属性 元素应用2D或3D转换

transform属性 元素应用2D或3D转换

作者: 小冕 | 来源:发表于2017-08-17 10:27 被阅读0次

transform属性向元素应用2D或3D转换,该属性允许我们对元素进行旋转,缩放,移动或倾斜。
注:Chrome和Safari要求前缀 -webkit- 版本;Internet Explorer 9要求前缀 -ms- 版本。

2D转换方法:

  • translate() 根据左(x轴)和顶部(y轴)位置给定的参数,从当前元素位置移动。
如:
div{
  transform:translate(50px,100px);/*是从左边元素移动50个像素,并从顶部移动100像素*/
-ms-transform:translate(50px,100px);
-webkit-transform:translate(50px,100px);
}
  • rotate()在一个给定度数顺时针旋转的元素,负值是允许的,这样元素是逆时针旋转。
div{
transform:rotate(30deg);/*顺时针旋转30度*/
}
  • scale()元素增加或减少的大小,取决于宽度(x轴)和高度(y轴)的参数;
div{
transform:scale(2,3);/*转变宽度为原来的大小的2倍,和其原始大小3倍的高度*/
}
  • skew():包含两个参数值,分别表示x轴和y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
    • skewX(<angle>):表示只在X轴(水平方向)倾斜。
    • skewY(<angle>):表示只在Y轴(垂直方向)倾斜。
div{
transform:skew(30deg,40deg);/*元素在X轴倾斜30度,在Y轴上倾斜40度*/
}
  • matrix()方法和2D变换方法合并成一个。
    matrix方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);/*使div元素旋转30度*/
}

3D转换方法:

注:紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

  • rotateX():围绕其在一个给定度数X轴旋转的元素。
  • rotateY():围绕其在一个给定度数Y轴旋转的元素。
图片来自菜鸟教程网.png

相关文章

  • 11.20-补充

    translate:transform:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对...

  • transform

    属性transform 向元素应用 2D 或 3D 转换。transfo...

  • CSS3:变化属性 transform

    transform 属性应用于元素的 2D 或 3D 转换。这个属性允许将元素进行移动 (translate)、旋...

  • transform属性 元素应用2D或3D转换

    transform属性向元素应用2D或3D转换,该属性允许我们对元素进行旋转,缩放,移动或倾斜。注:Chrome和...

  • css3动画

    transform 功能:向元素应用2D或3D转换语法:transform:none|transform-func...

  • Transform(CSS动态属性的开始)

    1、基本概念 基本概念:transform 属性向元素应用 2D 或 3D 转换;该属性允许我们对元素进行旋转、缩...

  • transform属性

    transform属性向元素应用2D,3D转化。该属性允许我们对元素进行旋转,缩放,移动,或者倾斜。rotate:...

  • 6_动画_其他属性

    2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...

  • 7. css动画-页面特效

    7.1 2D、3D转换效果(transform属性) 说明:通过CSS3转换,可以对元素进行移动、转动、缩放、拉长...

  • css3 2D、3D变形

    用transform对元素进行2D、3D变形,变形只对块级元素有效。 transform的基本属性及属性值: tr...

网友评论

      本文标题:transform属性 元素应用2D或3D转换

      本文链接:https://www.haomeiwen.com/subject/svrgrxtx.html