美文网首页
CSS中2D,3D的转换

CSS中2D,3D的转换

作者: StrawberrySan | 来源:发表于2018-04-01 20:58 被阅读0次

    通过CSS3转换,对元素进行移动,缩放,转动,拉长或拉伸。转换是使元素改变形状,尺寸和位置的一种效果。可以用2D,3D来转换元素。

    2D转换法


    首先我们写出一个初始的效果代码


    • translate()

    效果示例:


    translate
    • rotate()

    效果示例:


    rotate
    • scale()

    效果示例:


    scale
    • skew()

    效果示例:


    skew
    • matrix()

    以上的效果都通过如图示例的CSS样式来改变的

    css代码示例

    3D转换法

    • rotate X()
    • rotate Y()
      CSS代码示例:


      x与Y都是同样的

    相关文章

      网友评论

          本文标题:CSS中2D,3D的转换

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