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是一个高可扩展.高可用.高性能.面向互联网服务的分布式文件系统,主要针对海量的非结构化数据, 它构筑在普通 ...
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！