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 |
---|---|---|
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转换的更多相关文章
- 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 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- 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 ...
随机推荐
- MVC中的Ajax(AjaxHelper)
authour: chenboyi updatetime: 2015-04-30 20:47:49 friendly link: 目录 1,思维导图 2,ActionLink() 3,BeginF ...
- JS简易时钟
HTML <div id="clock"> <span></span>:<span></span>:<span&g ...
- Spring ApplicationContext的国际化支持
ApplicationContext接口继承MessageSource接口,因此具备国际化功能.下面是MessageSource接口定义的三个国际化方法. >String getMessage( ...
- SPFA 最短路径打印方法
#include <iostream> #include <cstdlib> #include <cstdio> #include <algorithm> ...
- jsoup web scraping
jsoup简介 jsoup是一款HTML解析器,可用与解析URL地址.HTML文本内同等,操作类似于jQuery,可通过DOM查找数据,操作数据, 使用时需引入jsoup jar jsoup可以从包含 ...
- c宏的MAX函数
今天从香山上面回来累的跟傻逼一样,回来问了一下胡总的阿里面试的问题.然后其中有一个是宏写max函数.胡总说不好写,然后我就去洗澡了. 洗澡的时候感觉不对啊,回来写了一个: #define MAX(a, ...
- 基于JAVA的webVNC
jxpiInstall安装程序下载: http://sdlc-esd.sun.com/ESD6/JSCDL/jdk/7u60-b19/jxpiinstall.exe?AuthParam=1402208 ...
- 9月1日,请记得备好名片来PechaKucha Night和大家“闲聊” | Hi!设计
9月1日,请记得备好名片来PechaKucha Night和大家"闲聊" | Hi!设计 9月1日,请记得来PechaKucha Night和大家"闲聊"
- Java 8 中新的 Date 和 Time 类入门详解
这篇文章主要是java8中新的Date和Time API的实战.新的Date和Time类是java开发者社区千呼万唤始出来的.Java8 之前存在的Date类一直都受人诟病,很多人都会选择使用第三方的 ...
- chrome播放语音时,在chrome 控制台中报 DOMException: The play() request was interrupted by a call to pause(). 的问题.
$(document).ready(function () { var audioElement = $( '<audio>' + ' <source src="" ...