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的取值 ...

随机推荐

关于iOS多线程，你看我就够了
在这篇文章中,我将为你整理一下 iOS 开发中几种多线程方案,以及其使用方法和注意事项.当然也会给出几种多线程的案例,在实际使用中感受它们的区别.还有一点需要说明的是,这篇文章将会使用 Swift ...
设置grub密码
一,明文加密的方法 vi /etc/grub.conf 在hiddenmenu下添加password=1234,保存退出. 二,密文加密的方法 2.1, 使用SHA加密方式.grub-crypt 回 ...
CMD下用csc.exe编译.cs 代码
用惯了VS来写C#代码,要是用记事本写会不会觉得很好玩,然后再CMD窗口下编译运行,当然写一些简单的Console代码还是可以这么玩玩的,如果你觉得打开VS太麻烦的话. 把后缀名改成.cs,test. ...
[AngularJS系列(4)] 那伤不起的provider们啊~ (Provider, Value, Constant, Service, Factory, Decorator)（转）
用AngularJS做项目,但凡用过什么service啊,factory啊,provider啊,开始的时候晕没晕?!晕没晕?!感觉干的事儿都差不多啊,到底用哪个啊?!别告诉我你们几个就是为了跟我炫耀兄 ...
html5的改变
html5的改变新增的元素新增的结构元素 section.article.aside.header.hgroup.footer.nav.figure 新增的其他元素 video.audio.emb ...
计算机模拟（hd1283）
最简单的计算机 Problem Description 一个名叫是PigHeadThree的研究组织设计了一台实验用的计算机,命名为PpMm.PpMm只能执行简单的六种命令A,B,C,D,E,F:只有 ...
iOS正则表达式的使用
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
深入理解Autofac生命周期
为什么Autofac表现的这样? 这里似乎有几个陷阱,虽然这里只有一个------并且这个值得重申: Autofac将会跟踪每一个他所创建的可销毁的组件实例,无论这个实例是怎样被获取的. 当然,最终. ...
Android学习笔记——Activity的启动和创建
http://www.cnblogs.com/bastard/archive/2012/04/07/2436262.html Android Activity学习笔记——Activity的启动和创建 ...
winform，wpf全屏还显示任务栏的解决方法
原文:winform,wpf全屏还显示任务栏的解决方法以wpf为例: 全屏代码: this.Topmost = true; this.WindowStyle = System.Windows.Wi ...