美文网首页
CSS3中2D和3D的转换

CSS3中2D和3D的转换

作者: Crazy丶Harvey | 来源:发表于2018-06-07 23:02 被阅读66次

    CSS3 转换:

     CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。


    2D转换方法:

    • translate()方法:(位移) 根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
        例:translate(50px,100px)是从左边元素移动50个像素,并从顶部移动100个像素。
    • rotate()方法:(旋转)在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
        例:rotate(30deg)元素顺时针旋转30°
    • scale() 方法:(缩放)该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数。
        例:scale(2,4)转变宽度为原来的大小的2倍,何其原始大小4倍的高度。
    • skew()方法:(扭曲)该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度。
        例:skew(30deg,20deg)元素在x轴和y轴上倾斜20°和30°
    • matrix()方法:(矩阵) matrix方法有六个参数,包含旋转,缩放,移动和倾斜共功能。
        例如:matrix(n,n,n,n,n,n)使用六个值的矩阵。

    transform:适用于2D和3D转换的元素。
    transform-origin:允许更改转化元素的位置。

    3D转换方法:

    1.rotateX() 方法:围绕其在一个给定度数X轴旋转的元素。
    2.rotateY()方法:围绕其在一个给定度数Y轴旋转的元素。
    3.rotate3d(x,y,z.angle):定义3D转换。
    4.scale3d(x,y,z)方法:定义3D缩放转换。


    transform-style:规定被嵌套元素如何在3D空间中显示。
    perspective:规定3D元素的透视效果。
    perspective-origin:规定3D元素的底部位置。
    backface-visibility :定义元素在不面对屏幕时是否可见。

    相关文章

      网友评论

          本文标题:CSS3中2D和3D的转换

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