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

随机推荐

OpenCV2马拉松第14圈——边缘检測(Sobel,prewitt,roberts)
收入囊中差分在边缘检測的角色 Sobel算子 OpenCV sobel函数 OpenCV Scharr函数 prewitt算子 Roberts算子葵花宝典差分在边缘检測究竟有什么用呢?先看以下的 ...
Hide a file in a picture
有时候.假设你想在电脑上隐藏关键的文件而不想让其它人看见.你会怎么做呢?找一个专业的工具?为目录设置password?更改文件属性?这些方法可行.但它们可能不太方便和安全.这里,我给大家共享一个在图片 ...
让man 显示中文
1.添加库函数手册 ubuntu默认是没有安装c语言的库函数man手册的,所以你在man perror 和sendto之类的函数时会显示没有相关文档的问题,这个问题让我郁闷了我好久.解决方法: sud ...
自定义视图控制器切换（iOS）
在iOS开发过程中,通常我们会使用UINavigationController,UITabbarController等苹果提供的视图控制器来切换我们的视图.在iOS5之前,如果要自定义容器视图控制器很 ...
Floyd算法(弗洛伊德算法)
算法描述: Floyd算法又称为弗洛伊德算法,插点法,是一种用于寻找给定的加权图中顶点间最短路径的算法.从图的带权邻接矩阵A=[a(i,j)] n×n开始,递归地进行n次更新,即由矩阵D(0)=A,按 ...
从汇编看c++初始化列表初始化成员变量
简略来说,编译器会对初始化列表按照成员变量的声明顺序重新一一排序,安插到构造函数中进行初始化操作,而且这些初始化操作在构造函数里面用户自己定义的任何代码之前. 下面是c++源码: class X { ...
杭电OJ—— 1084 What Is Your Grade?
What Is Your Grade? Problem Description “Point, point, life of student!” This is a ballad(歌谣)well kn ...
Activiti+oracle 启动项目时不能自动建表或更新表的问题分析及解决办法
现象描述:按照正常配置,第一次启动时不能自动建表关键配置片段如下: <bean id="processEngineConfiguration" class="or ...
spring下配置dbcp,c3p0,proxool[转]
不管通过何种持久化技术,都必须通过数据连接访问数据库,在Spring中,数据连接是通过数据源获得的.在以往的应用中,数据源一般是Web应用服务器提供的.在Spring中,你不但可以通过JNDI获取应用 ...
水池（DFS）
水池数目点我描述南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上仅标识了此处是否是水池,现在,你的任务来了,请用计算机算出该地图中 ...