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

3D转换方法:

  • rotateX()
  • rotateY()

浏览器支持

属性 浏览器支持
transform          

IE10和Firefox支持3D转换。

Chrome和Safari需要前缀-webkit-.

Operate仍然不支持3D转换。

1.rotateX()方法

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

        div.rotateXTwo {
background-color: red;
transform: rotateX(120deg);
}

2.rotateY()旋转

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

        div.rotateYTwo {
transform: rotateY(130deg);
background-color: red;
}

转换属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

2D Transform 方法

函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)
定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

CSS3 3D转换的更多相关文章

  1. CSS3 3D 转换

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

  2. CSS3 3D转换——rotateX(),rotateY(),rotateZ()

    CSS3 允许使用 3D 转换来对元素进行格式化. ㈠浏览器支持 Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webk ...

  3. 【Demo】CSS3 3D转换

    3D转换transform rotateX() 方法 rotateX()方法,围绕其在一个给定度数X轴旋转的元素. div { transform: rotateX(120deg); -webkit- ...

  4. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  5. HTML CSS3中2D转换、3D转换、过渡效果总结

    一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...

  6. css3 3d特效汇总

    本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下 张鑫旭css3 3d转换,或者看我的另一篇博客  css3 2d转换3d转换以及动画的知识点汇总,看完这些3d ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. CSS笔记(十二)CSS3之2D和3D转换

    参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 ...

  9. CSS自学笔记(13):CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

随机推荐

  1. MVC中的Ajax(AjaxHelper)

    authour: chenboyi updatetime: 2015-04-30 20:47:49 friendly link:   目录 1,思维导图 2,ActionLink() 3,BeginF ...

  2. JS简易时钟

    HTML <div id="clock"> <span></span>:<span></span>:<span&g ...

  3. Spring ApplicationContext的国际化支持

    ApplicationContext接口继承MessageSource接口,因此具备国际化功能.下面是MessageSource接口定义的三个国际化方法. >String getMessage( ...

  4. SPFA 最短路径打印方法

    #include <iostream> #include <cstdlib> #include <cstdio> #include <algorithm> ...

  5. jsoup web scraping

    jsoup简介 jsoup是一款HTML解析器,可用与解析URL地址.HTML文本内同等,操作类似于jQuery,可通过DOM查找数据,操作数据, 使用时需引入jsoup jar jsoup可以从包含 ...

  6. c宏的MAX函数

    今天从香山上面回来累的跟傻逼一样,回来问了一下胡总的阿里面试的问题.然后其中有一个是宏写max函数.胡总说不好写,然后我就去洗澡了. 洗澡的时候感觉不对啊,回来写了一个: #define MAX(a, ...

  7. 基于JAVA的webVNC

    jxpiInstall安装程序下载: http://sdlc-esd.sun.com/ESD6/JSCDL/jdk/7u60-b19/jxpiinstall.exe?AuthParam=1402208 ...

  8. 9月1日,请记得备好名片来PechaKucha Night和大家“闲聊” | Hi!设计

    9月1日,请记得备好名片来PechaKucha Night和大家"闲聊" | Hi!设计 9月1日,请记得来PechaKucha Night和大家"闲聊"

  9. Java 8 中新的 Date 和 Time 类入门详解

    这篇文章主要是java8中新的Date和Time API的实战.新的Date和Time类是java开发者社区千呼万唤始出来的.Java8 之前存在的Date类一直都受人诟病,很多人都会选择使用第三方的 ...

  10. chrome播放语音时,在chrome 控制台中报 DOMException: The play() request was interrupted by a call to pause(). 的问题.

    $(document).ready(function () { var audioElement = $( '<audio>' + ' <source src="" ...