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

㈠浏览器支持

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

Chrome 和 Safari 需要前缀 -webkit-。

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

 

㈡rotateX() 方法

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

  1.  代码如下所示：
  2.  <!DOCTYPE html>
  3.  <html>
  4.  <head>
  5.  <style>
  6.  div
  7.  {
  8.  width:220px;
  9.  height:200px;
  10.  background-color:yellow;
  11.  border:1px solid black;
  12.  }
  13.  div#div2
  14.  {
  15.  transform:rotateX(60deg);
  16.  -webkit-transform:rotateX(60deg); /* Safari and Chrome */
  17.  -moz-transform:rotateX(60deg); /* Firefox */
  18.  }
  19.  </style>
  20.  </head>
  21.  <body>
  23.  <div>初始状态</div>
  25.  <div id="div2">围绕x轴旋转120度</div>
  27.  <p><b>注释：</b> 元素围绕其 X 轴以给定120度数进行旋转</p>
  29.  </body>
  30.  </html>

效果如下：

㈢rotateY() 旋转

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

  1.  代码如下所示：
  2.  <!DOCTYPE html>
  3.  <html>
  4.  <head>
  5.  <style>
  6.  div
  7.  {
  8.  width:190px;
  9.  height:165px;
  10.  background-color:blue;
  11.  border:1px solid black;
  12.  }
  13.  div#div2
  14.  {
  15.  transform:rotateY(130deg);
  16.  -webkit-transform:rotateY(130deg); /* Safari and Chrome */
  17.  -moz-transform:rotateY(130deg); /* Firefox */
  18.  }
  19.  </style>
  20.  </head>
  21.  <body>
  23.  <div>初始状态</div>
  25.  <div id="div2">围绕y轴旋转130度</div>
  27.  <p><b>注释：</b>元素围绕其 y轴以给定130度数进行旋转</p>
  29.  </body>
  30.  </html>

效果如下：

㈣rotateZ() 旋转

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

  1.  代码如下所示：
  2.  <!DOCTYPE html>
  3.  <html>
  4.  <head>
  5.  <style>
  6.  div
  7.  {
  8.  width:170px;
  9.  height:135px;
  10.  background-color:red;
  11.  border:1px solid black;
  12.  }
  13.  div#div2
  14.  {
  15.  transform:rotateZ(110deg);
  16.  -webkit-transform:rotateZ(110deg); /* Safari and Chrome */
  17.  -moz-transform:rotateZ(110deg); /* Firefox */
  18.  }
  19.  </style>
  20.  </head>
  21.  <body>
  23.  <div>初始状态</div>
  25.  <div id="div2">围绕Z轴旋转110度</div>
  27.  <p><b>注释：</b>元素围绕其 Z轴以给定110度数进行旋转</p>
  29.  </body>
  30.  </html>

效果如下：

 

 ㈤转换属性

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

 

⑴transform-origin 属性

★transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

为了更好地理解 transform-origin 属性，请查看这个下面链接的演示：

2D转换链接：https://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html

3D转换链接：https://www.w3school.com.cn/example/css3/demo_css3_transform-origin_3D.html

 

★示例：设置旋转元素的基点位置

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <style>
  5.  #div1
  6.  {
  7.  position: relative;
  8.  height: 200px;
  9.  width: 200px;
  10.  margin: 100px;
  11.  padding:10px;
  12.  border: 1px solid black;
  13.  }
  15.  #div2
  16.  {
  17.  padding:50px;
  18.  position: absolute;
  19.  border: 1px solid black;
  20.  background-color: yellow;
  21.  transform: rotate(45deg);
  22.  transform-origin:20% 40%;
  23.  -ms-transform: rotate(45deg); /* IE 9 */
  24.  -ms-transform-origin:20% 40%; /* IE 9 */
  25.  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  26.  -webkit-transform-origin:20% 40%; /* Safari and Chrome */
  27.  -moz-transform: rotate(45deg); /* Firefox */
  28.  -moz-transform-origin:20% 40%; /* Firefox */
  29.  -o-transform: rotate(45deg); /* Opera */
  30.  -o-transform-origin:20% 40%; /* Opera */
  31.  }
  32.  </style>
  33.  </head>
  35.  <body>
  37.  <div id="div1">
  38.    <div id="div2">HELLO</div>
  39.  </div>
  41.  </body>

效果如下：

 

★语法：transform-origin: x-axis y-axis z-axis;

 

 ⑵transform-style 属性

★transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

注意：该属性必须与 transform 属性一同使用。

 

★语法：transform-style: flat|preserve-3d;

 

★示例：使被转换的子元素保留其 3D 转换

  1.  代码如下所示：
  2.  <!DOCTYPE html>
  3.  <html>
  4.  <head>
  5.  <style>
  6.  #div1
  7.  {
  8.  position: relative;
  9.  height: 200px;
  10.  width: 200px;
  11.  margin: 100px;
  12.  padding:10px;
  13.  border: 1px solid black;
  14.  }
  16.  #div2
  17.  {
  18.  padding:50px;
  19.  position: absolute;
  20.  border: 1px solid black;
  21.  background-color: red;
  22.  transform: rotateY(60deg);
  23.  transform-style: preserve-3d;
  24.  -webkit-transform: rotateY(60deg); /* Safari and Chrome */
  25.  -webkit-transform-style: preserve-3d; /* Safari and Chrome */
  26.  }
  28.  #div3
  29.  {
  30.  padding:40px;
  31.  position: absolute;
  32.  border: 1px solid black;
  33.  background-color: yellow;
  34.  transform: rotateY(80deg);
  35.  -webkit-transform: rotateY(-60deg); /* Safari and Chrome */
  37.  }
  38.  </style>
  39.  </head>
  41.  <body>
  43.  <div id="div1">
  44.    <div id="div2">HELLO
  45.        <div id="div3">YELLOW</div>
  46.    </div>
  47.  </div>
  49.  </body>
  50.  </html>

效果如下;

 

⑶perspective 属性

★perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注意：①perspective 属性只影响 3D 转换元素。

           ②与 perspective-origin 属性一同使用该属性，这样就能够改变 3D 元素的底部位置。

 

★语法：perspective: number|none;

透明度拥有近大远小的特点，因此在设置透明度时设置数值相对较小最好。

 

 ★示例：设置元素被查看位置的视图

  1.  代码如下图所示：
  2.  <!DOCTYPE html>
  3.  <html>
  4.  <head>
  5.  <style>
  6.  #div1
  7.  {
  8.  position: relative;
  9.  height: 150px;
  10.  width: 150px;
  11.  margin: 50px;
  12.  padding:10px;
  13.  border: 1px solid black;
  14.  perspective:120;
  15.  -webkit-perspective:120; /* Safari and Chrome */
  16.  }
  18.  #div2
  19.  {
  20.  padding:50px;
  21.  position: absolute;
  22.  border: 1px solid black;
  23.  background-color: yellow;
  24.  transform: rotateX(45deg);
  25.  -webkit-transform: rotateX(45deg); /* Safari and Chrome */
  26.  }
  27.  </style>
  28.  </head>
  30.  <body>
  32.  <div id="div1">
  33.    <div id="div2">HELLO</div>
  34.  </div>
  36.  </body>
  37.  </html>

效果如下：

 

 ⑷perspective-origin 属性

 ★perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

    当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

 

★语法：perspective-origin: x-axis y-axis;

 

⑸backface-visibility 属性

★backface-visibility 属性定义当元素不面向屏幕时是否可见。

   如果在旋转元素不希望看到其背面时，该属性很有用。

 

★语法：backface-visibility: visible|hidden;

 

 ★示例：隐藏被旋转的 div 元素的背面：

  1. 代码如下所示：
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <style>
  6. div
  7. {
  8. position:relative;
  9. height:120px;
  10. width:120px;
  11. border:1px solid #000;
  12. background-color:yellow;
  13. transform:rotateY(180deg);
  14. -webkit-transform:rotateY(180deg); /* Chrome and Safari */
  15. -moz-transform:rotateY(180deg); /* Firefox */
  16. }
  17. #div1
  18. {
  19. -webkit-backface-visibility:hidden;
  20. -moz-backface-visibility:hidden;
  21. -ms-backface-visibility:hidden;
  22. }
  23. #div2
  24. {
  25. -webkit-backface-visibility:visible;
  26. -moz-backface-visibility:visible;
  27. -ms-backface-visibility:visible;
  28. }
  29. </style>
  30. </head>
  31. <body>
  33. <p>本例有两个 div 元素，均旋转 180 度，背向用户。</p>
  35. <p>第一个 div 元素的 backface-visibility 属性设置为 "hidden"，所以应该是不可见的。</p>
  37. <div id="div1">DIV 1</div>
  39. <div id="div2">DIV 2</div>
  41. </body>
  42. </html>

 

效果如下：

 

 ㈥2D Transform 方法

参考：w3school

 

         希望有所帮助！

CSS3 3D转换——rotateX()，rotateY()，rotateZ()的更多相关文章

  1. CSS3 3D变形 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)

    2d x y 3d x y z 左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 ...

  2. CSS3 3D转换

    CSS3允许你使用3D转换来对元素进行格式化. 3D转换方法: rotateX() rotateY() 浏览器支持 属性 浏览器支持 transform           IE10和Firefox支 ...

  3. CSS3 3D 转换

    CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: rotateX() rotateY() rotateX() 方法 rotateX()方法,围绕其在 ...

  4. 【Demo】CSS3 3D转换

    3D转换transform rotateX() 方法 rotateX()方法,围绕其在一个给定度数X轴旋转的元素. div { transform: rotateX(120deg); -webkit- ...

  5. CSS自学笔记（13）:CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  6. css3 2d转换3d转换以及动画的知识点汇总

    css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值 ...

  7. HTML CSS3中2D转换、3D转换、过渡效果总结

    一.CSS3 2D转换 通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用 ...

  8. 好吧，CSS3 3D transform变换，不过如此！

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  9. css3 3d学习心得

    css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...

随机推荐

  1. Next Closest Time

    Given a time represented in the format "HH:MM", form the next closest time by reusing the ...

  2. Oracle表的Rowid字段

    Rowid 字段类型: Rowid 是一行数据的一个唯一标识. ROWID 是数据的详细地址,通过 rowid,oracle 可以快速的定位某行具体的数据的位置. ROWID 可以分为物理 rowid ...

  3. CentOS7安装rabbitMQ，并实现浏览器访问

    第一.安装wget yum install wget 第二.下载erlang和rabbitmq-server的rpm (1)在/usr/local下创建目录rabbitMQ,并进入该目录 (2)下载 ...

  4. kettle An error occurred, processing will be stopped: 错误 解决方法

    上午在使用KETTLE时,报了一个 An error occurred, processing will be stopped: 错误,手动跑没有问题,用jekens调用就报错. 具体原因不清楚,后面 ...

  5. plpython 中文分词Windows 版

    windows 下安装版本匹配python-3.4.3.amd64.msipostgresql-10.1-2-windows-x64.exe create language plpython3u;se ...

  6. Git 实习一个月恍然大悟合集

    从开始实习到现在大概有一个月了,这个月时间接触了很多新东西,其中就包括了git版本控制.分支管理等等.我在这段时间里,深深地感受到了git对公司项目代码管理和控制.团队合作带来的益处和其重要性.其实在 ...

  7. 12 Scrapy框架的日志等级和请求传参

    一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息. - 日志信息的种类: ERROR : 一般错误 ...

  8. Linux 的帐号与群组：有效与初始群组、groups, newgrp

    关于群组: 有效与初始群组.groups, newgrp 认识了帐号相关的两个档案 /etc/passwd 与 /etc/shadow 之后,您或许还是会觉得奇怪, 那么群组的设定档在哪里?还有,在 ...

  9. 关于this关键字

    首先看一下这篇博客介绍:http://blog.csdn.net/ccpat/article/details/44515335 下面贴段代码 package com.xujingyang.test; ...

  10. httpclient 实现的http工具类

    HttpClient实现的工具类 就是簡單的用http 協議請求請求地址並返回數據,廢話少數直接上代碼 http請求返回的封裝類 package com.nnk.upstream.util; impo ...