美文网首页
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动画

    css3动画 过渡:transition 2D 转换 transform 3D 转换 transform 动画:a...

  • CSS3 转换(1):2D

    知识点:CSS3 TransformCSS3 2D转换CSS3 3D转换CSS3 Transform与坐标系统CS...

  • 6_动画_其他属性

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

  • 探究CSS3动画:transform/transition/an

    转换(transform) 如大家了解的一样,转换分为2D转换和3D转换。利用CSS3的转换功我们能够对元素进行移...

  • CSS3的3D变换

    CSS3 变换也叫 2D/3D转换,主要包括以下几种: 旋转 ( rotate ) 、 扭曲 ( skew ) 、...

  • 7. css动画-页面特效

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

  • CSS动画

    CSS动画: 对元素进行移动、缩放、转动、拉长或拉伸——>改变元素的形状、尺寸和位置 2D转换方法 3D转换方...

  • Css3 - transform(变形)

    一.2D转换 二.3D转换

  • CSS(二)

    css3动画 2D,3D转换方法 translate()向x,y轴移动 rotate()旋转180度 scale(...

  • 3DMax操作笔记

    3d 2d 2d转换3d 互相转换 2d线的 断开和连接 如果 连的线最后闭合会提示是否闭合,闭合方可转换为可编辑...

网友评论

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

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