css3 3d旋转兼容模式下,CSS3 3D转换

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

向元素应用 2D 或 3D 转换。

3

规定被嵌套元素如何在 3D 空间中显示。

3

规定 3D 元素的透视效果。

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 转换

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

CSS3 3D转换——rotateX()，rotateY()，rotateZ()

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

【Demo】CSS3 3D转换

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

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

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

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

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

css3 3d特效汇总

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

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

CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角

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

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

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

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

随机推荐

dubox首次调用消费者执行两次问题

dubbox+zookeeper服务开启后 Dubbo的超时重试机制为服务容错.服务稳定提供了比较好的框架支持,但是在一些比较特殊的网络环境下(网络传输慢,并发多)可能由于服务响应慢,Dubbo自身的 ...

python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

Linux高级编程--11.信号

基本概念 信号在Linux中是一个比较常见的概念,例如我们按Ctrl+C中断前台进程,通过Kill命令结束进程都是通过信号实现的.下面就以Ctrl+C为例简单的说明信号的处理流程: 用户按下Ctrl- ...

GCD详细使用笔记

第一.通过GCD创建队列(Queue) 创建队列方式有以下几种: 1.创建一个串行队列: dispatch_queue_t queue =dispatch_queue_create("串行队 ...

[PCB设计] 4、BAT脚本处理AD生成的GERBER文件为生产文件

1.生产资料概述 为了资料保密和传输方便,交给PCB厂商打样的资料一般以Gerber和钻孔文件为主,换句话说,只要有前面说的两种文件,就能制作出你想要的PCB了. 一般来说,交给PCB厂商的Gerbe ...

javaWEB与Session

HttpSession(*****)1. HttpSession概述  * HttpSession是由JavaWeb提供的,用来会话跟踪的类.session是服务器端对象,保存在服务器端!!!  * ...

Jvm垃圾收集器和垃圾回收算法

概述: 目前内存的动态分配和内存的回收技术已经相当成熟,一切看起来都已经进入了“自动化”时代,为什么还要去了解GC和内存分配呢?原因很简单:当需要排查各种内存泄漏.内存溢出问题时,当垃圾收集器成为系统 ...

unity 使用RotateAround的使用注意

1.对于一个固定的点,围绕它进行旋转.需要注意区分世界坐标还是本地坐标 RotateAround(GameObject.Find("Cave").transform.positio ...

#个人博客作业Week1——流行的源程序版本管理软件和项目管理软件

1.TFS(Team Foundation Server)(1)定义:TFS是一个高可扩展.高可用.高性能.面向互联网服务的分布式文件系统,主要针对海量的非结构化数据,          它构筑在普通 ...