美文网首页
CSS3 3D转换

CSS3 3D转换

作者: 搬不完的元猿员 | 来源:发表于2019-05-30 05:00 被阅读0次

3D 转换

仅供参考43/45/46

CSS3 允许您使用 3D 转换来对元素进行格式化。

rotateX()

rotateY()

2D 旋转3D 旋转

它如何工作?

转换是使元素改变形状、尺寸和位置的一种效果。

transform

Internet Explorer 10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换(它只支持 2D 转换)。

rotateX() 方法

通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。

实例

div

{

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */

-moz-transform: rotateX(120deg); /* Firefox */

}

rotateY() 旋转

通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

实例

div

{

transform: rotateY(130deg);

-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */

-moz-transform: rotateY(130deg); /* Firefox */

}   

相关文章

  • CSS3 转换(1):2D

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

  • css动画

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

  • 一篇文章带你了解CSS3 3D 转换知识

    CSS3 3D变换功能允许在3D空间中变换元素。 一、元素的3D转换 使用CSS3 3D变换功能,可以对三维空间中...

  • 一篇文章带你了解CSS3 3D 转换知识

    CSS3 3D变换功能允许在3D空间中变换元素。 一、元素的3D转换 使用CSS3 3D变换功能,可以对三维空间中...

  • 3D轮播

    目的 掌握 transform 3D 效果 熟悉 perspective属性 基本概念 CSS3 3D 转换:使元...

  • CSS3 转换(2):3D转换

    三、CSS3 3D转换 知识点:rotate3d()CSS3 translate3d()CSS3 scale3d(...

  • CSS3 3D转换

    3D 转换 仅供参考43/45/46 CSS3 允许您使用 3D 转换来对元素进行格式化。 rotateX() r...

  • 3D转换

    CSS3 允许您使用 3D 转换来对元素进行格式化。在本章中,您将学到其中的一些 3D 转换方法:rotateX(...

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

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

  • 7. css动画-页面特效

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

网友评论

      本文标题:CSS3 3D转换

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