3D转换

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

在本章中，您将学到其中的一些 3D 转换方法：

1. rotateX()
2. rotateY()

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p onclick="rotateDIV()" id="rotate1" class="animated_div">2D 旋转</p>
<p onclick="rotateYDIV()" id="rotatey1" class="animated_div">3D 旋转</p>
</body>
</html>

css：

#rotate1, #rotatey1 {
   border: 1px solid #000000;
   background: red;
   margin: 10px;
   opacity: 0.7;
}
.animated_div {
   width: 60px;
   height: 40px;
   color: #ffffff;
   position: relative;
   font-weight: bold;
   padding: 20px 10px 0px 10px;
   float: left;
   margin: 20px;
   margin-right: 50px;
   border: 1px solid #888888;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   font: 12px Verdana, Arial, Helvetica, sans-serif;
   text-align: center;
   vertical-align: middle;
}

js：

var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
   x=document.getElementById("rotate1")
   clearInterval(rotINT)
   rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
   y=document.getElementById("rotatey1")
   clearInterval(rotYINT)
   rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
   n=n+1
   x.style.transform="rotate(" + n + "deg)"
   x.style.webkitTransform="rotate(" + n + "deg)"
   x.style.OTransform="rotate(" + n + "deg)"
   x.style.MozTransform="rotate(" + n + "deg)"
   if (n==180 || n==360)
   {
   clearInterval(rotINT)
   if (n==360){n=0}
   }
}
function startYRotate()
{
   ny=ny+1
   y.style.transform="rotateY(" + ny + "deg)"
   y.style.webkitTransform="rotateY(" + ny + "deg)"
   y.style.OTransform="rotateY(" + ny + "deg)"
   y.style.MozTransform="rotateY(" + ny + "deg)"
   if (ny==180 || ny>=360)
   {
   clearInterval(rotYINT)
   if (ny>=360){ny=0}
   }
}

它如何工作？

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

您可以使用 2D 或 3D 转换来转换您的元素。

浏览器支持

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

Chrome 和 Safari 需要前缀 -webkit-。

Opera 仍然不支持 3D 转换（它只支持 2D 转换）。

1.rotateX() 方法

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

示例：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
   <div>
       你好。这是一个 div 元素。
   </div>
   <div id="div2">
       你好。这是一个 div 元素。
   </div>
   <p>
      <b>注释：</b> Internet Explorer 和 Opera 不支持 rotateX 方法。
   </p>
</body>
</html>

css:

div
{
   width:100px;
   height:75px;
   background-color:yellow;
   border:1px solid black;
}
div#div2
{
   transform:rotateX(180deg);
   -webkit-transform:rotateX(180deg); /* Safari and Chrome */
   -moz-transform:rotateX(180deg); /* Firefox */
}

2.rotateY() 旋转

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

实例

div
{
   width:100px;
   height:75px;
   background-color:yellow;
   border:1px solid black;
}
div#div2
{
   transform:rotateY(180deg);
   -webkit-transform:rotateY(180deg); /* Safari and Chrome */
   -moz-transform:rotateY(180deg); /* Firefox */
}

转换属性

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

属性	描述	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 转换元素的透视视图。

3D转换的更多相关文章

CSS 3 学习——transform 3D转换渲染
以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...
CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
3d转换-正方体-Html5Css3-遁地龙卷风
(-1) 写在前面我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...
CSS 3 3D转换
绘制3D环境父元素设置了 preserve-3d 子元素就可以以父元素作为平面进行3d转换 transform-style: preserve-3d; 设置视点 :表示透视效果值越小透视效果 ...
css3学习总结8--CSS3 3D转换
3D 转换 1. rotateX() 2. rotateY() otateX() 方法通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转. 示例: div { transform ...
CSS笔记（十二）CSS3之2D和3D转换
参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法函数描述 matrix(n,n,n,n,n,n) 定义 ...
CSS3 3D转换
CSS3允许你使用3D转换来对元素进行格式化. 3D转换方法: rotateX() rotateY() 浏览器支持属性浏览器支持 transform IE10和Firefox支 ...
CSS自学笔记（13）:CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
css3 2d转换3d转换以及动画的知识点汇总
css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

随机推荐

hive优化之自己主动合并输出的小文件
1.先在hive-site.xml中设置小文件的标准. <property> <name>hive.merge.smallfiles.avgsize</name> ...
centos上node.js的安装
CentOS 下安装 Node.js 1.下载源码,你需要在https://nodejs.org/en/download/下载最新的Nodejs版本,本文以v0.10.24为例: cd /usr/lo ...
UMl概述（转）
1. UML的组成 UML由视图(View).图(Diagram).模型元素(Model Element)和通用机制(General Mechanism)等几个部分组成. a) 视图(View): 是 ...
win7系统64位安装oracle10g
win7系统64位安装oracle10g 下载地址: http://download.oracle.com/otn/nt/oracle10g/10204/10204_vista_w2k8_x64_pr ...
list集合接口
import java.util.ArrayList; import java.util.List; class Phone { private String brand; private doubl ...
arm ldr 指令
ldr 指令格式:(读取概念) ldr{条件} 1目的寄存器,2存储器地址 eg: ldr r0,[r1]; 把r1中数据值读取到r0中: ldr r0,[r1,r2];把r1+r2的数值读取到r0 ...
[转载]CodeBlocks+wxWidgets
到www.CodeBlocks.org下载并安装CodeBlocks,最好下载MinGW版本的,可以省掉安装和配置GCC的麻烦. 到www.wxWidgets.org下载并安装wxWidgets,如果 ...
JSON入门之二：org.json的基本用法
java中用于解释json的主流工具有org.json.json-lib与gson,本文介绍org.json的应用. 官方文档: http://www.json.org/java/ http://de ...
关于web标准的理解(转)
从开始接触所谓web标准化,差不多也有两年多的时候了吧.从最初的疑惑和彷徨一直到现在,经历了每一个阶段.这段过程是痛苦的也是开心的,痛苦的是这个过程中没有人可以帮你答疑解惑,所有的问题都要你自己去解决 ...
Chapter 02：复合 VS 继承
复合优先于继承,继承是实现代码重用的有力手段,并不是所有情况都适用,使用不当会导致软件变得很脆弱.与方法调用不同的是,继承打破了封装性. 总而言之,组合和继承,都能实现对类的扩展.但是要分具体情况用哪 ...