将以下代码复制到本地就可以看到效果：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>transform属性</title>
  6. </head>
  7. <style type="text/css">
  8.      .oneX{
  9.         border: 2px crimson solid;
  10.         background-color: chartreuse;
  11.         width: 100px;
  12.         height: 100px;
  13.          transform: rotateX(0deg);
  14.          -moz-transform: rotateX(0deg);
  15.          -webkit-transform: rotateX(0deg);
  16.          -ms-transform: rotateX(0deg);
  17.     }
  18.      .oneY{
  19.          border: 2px crimson dashed;
  20.          background-color: chartreuse;
  21.          width: 100px;
  22.          height: 100px;
  23.          transform: rotateY(0deg);
  24.          -moz-transform: rotateY(0deg);
  25.          -webkit-transform: rotateY(0deg);
  26.          -ms-transform: rotateY(0deg);
  27.  
  28.      }
  29.      .one{
  30.          border: 2px crimson dashed;
  31.          background-color: chartreuse;
  32.          width: 100px;
  33.          height: 100px;
  34.      }
  35.      .oneO{
  36.          border: 2px crimson dashed;
  37.          background-color: chartreuse;
  38.          width: 100px;
  39.          height: 100px;
  40.          margin: 150px;
  41.          transform-origin:  ;
  42.          -webkit-transform-origin:  ;
  43.          -ms-transform-origin:  ;
  44.          -moz-transform-origin:  ;
  45.          -webkit-transform-style: preserve-3d;
  46.      }
  47.      .one3D{
  48.          border: 2px crimson dashed;
  49.          background-color: chartreuse;
  50.          width: 100px;
  51.          height: 100px;
  52.          margin: 150px;
  53.          transform-origin: % % 75px;
  54.          -webkit-transform-origin: % % 75px;
  55.          -ms-transform-origin:  % % 75px;
  56.          -moz-transform-origin:  % % 75px;
  57.          -webkit-transform-style: preserve-3d;
  58.          transform-style: preserve-3d;
  59.          -moz-transform-style: preserve-3d;
  60.          -ms-transform-style: preserve-3d;
  61.          box-shadow: 10px 10px 5px #;
  62.      }
  63.      .one2D{
  64.          border: 2px crimson dashed;
  65.          background-color: chartreuse;
  66.          width: 100px;
  67.          height: 100px;
  68.          margin: 150px;
  69.          transform-origin: % % 75px;
  70.          -webkit-transform-origin: % % 75px;
  71.          -ms-transform-origin:  % % 75px;
  72.          -moz-transform-origin:  % % 75px;
  73.          -webkit-transform-style: flat;
  74.          transform-style: flat;
  75.          -moz-transform-style: flat;
  76.          -ms-transform-style: flat;
  77.          box-shadow: 10px 10px 5px #;
  78.      }
  79. </style>
  80. <body>
  81. <p>只有在transform属性存在情况下transform-style和transform-origin才会有效果。</p>
  82. <p>transform属性介绍：</p>
  83. <table>
  84.  
  85.     <tbody><tr>
  86.         <th style="width:25%">值</th>
  87.         <th>描述</th>
  88.  
  89.     </tr>
  90.  
  91.     <tr>
  92.         <td>none</td>
  93.         <td>定义不进行转换。</td>
  94.  
  95.     </tr>
  96.  
  97.     <tr>
  98.         <td>matrix(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td>
  99.         <td>定义 2D 转换，使用六个值的矩阵。</td>
  100.  
  101.     </tr>
  102.  
  103.     <tr>
  104.         <td>matrix3d(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td>
  105.         <td>定义 3D 转换，使用  个值的 4x4 矩阵。</td>
  106.  
  107.     </tr>
  108.  
  109.     <tr>
  110.         <td>translate(<i>x</i>,<i>y</i>)</td>
  111.         <td>定义 2D 转换。</td>
  112.  
  113.     </tr>
  114.  
  115.     <tr>
  116.         <td>translate3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>
  117.         <td>定义 3D 转换。</td>
  118.  
  119.     </tr>
  120.  
  121.     <tr>
  122.         <td>translateX(<i>x</i>)</td>
  123.         <td>定义转换，只是用 X 轴的值。</td>
  124.  
  125.     </tr>
  126.  
  127.     <tr>
  128.         <td>translateY(<i>y</i>)</td>
  129.         <td>定义转换，只是用 Y 轴的值。</td>
  130.  
  131.     </tr>
  132.  
  133.     <tr>
  134.         <td>translateZ(<i>z</i>)</td>
  135.         <td>定义 3D 转换，只是用 Z 轴的值。</td>
  136.  
  137.     </tr>
  138.  
  139.     <tr>
  140.         <td>scale(<i>x</i>[,<i>y</i>]?) </td>
  141.         <td>定义 2D 缩放转换。</td>
  142.  
  143.     </tr>
  144.  
  145.     <tr>
  146.         <td>scale3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>
  147.         <td>定义 3D 缩放转换。</td>
  148.  
  149.     </tr>
  150.  
  151.     <tr>
  152.         <td>scaleX(<i>x</i>)</td>
  153.         <td>通过设置 X 轴的值来定义缩放转换。</td>
  154.  
  155.     </tr>
  156.  
  157.     <tr>
  158.         <td>scaleY(<i>y</i>)</td>
  159.         <td>通过设置 Y 轴的值来定义缩放转换。</td>
  160.  
  161.     </tr>
  162.  
  163.     <tr>
  164.         <td>scaleZ(<i>z</i>)</td>
  165.         <td>通过设置 Z 轴的值来定义 3D 缩放转换。</td>
  166.  
  167.     </tr>
  168.  
  169.     <tr>
  170.         <td>rotate(<i>angle</i>)</td>
  171.         <td>定义 2D 旋转，在参数中规定角度。</td>
  172.  
  173.     </tr>
  174.  
  175.     <tr>
  176.         <td>rotate3d(<i>x</i>,<i>y</i>,<i>z</i>,<i>angle</i>)</td>
  177.         <td>定义 3D 旋转。</td>
  178.  
  179.     </tr>
  180.  
  181.     <tr>
  182.         <td>rotateX(<i>angle</i>)</td>
  183.         <td>定义沿着 X 轴的 3D 旋转。</td>
  184.  
  185.     </tr>
  186.  
  187.     <tr>
  188.         <td>rotateY(<i>angle</i>)</td>
  189.         <td>定义沿着 Y 轴的 3D 旋转。</td>
  190.  
  191.     </tr>
  192.  
  193.     <tr>
  194.         <td>rotateZ(<i>angle</i>)</td>
  195.         <td>定义沿着 Z 轴的 3D 旋转。</td>
  196.  
  197.     </tr>
  198.  
  199.     <tr>
  200.         <td>skew(<i>x-angle</i>,<i>y-angle</i>)</td>
  201.         <td>定义沿着 X 和 Y 轴的 2D 倾斜转换。</td>
  202.  
  203.     </tr>
  204.  
  205.     <tr>
  206.         <td>skewX(<i>angle</i>)</td>
  207.         <td>定义沿着 X 轴的 2D 倾斜转换。</td>
  208.  
  209.     </tr>
  210.  
  211.     <tr>
  212.         <td>skewY(<i>angle</i>)</td>
  213.         <td>定义沿着 Y 轴的 2D 倾斜转换。</td>
  214.  
  215.     </tr>
  216.  
  217.     <tr>
  218.         <td>perspective(<i>n</i>)</td>
  219.         <td>为 3D 转换元素定义透视视图。</td>
  220.  
  221.     </tr>
  222.     </tbody></table>
  223. <p>实例:</p>
  224. <p>X轴旋转：</p>
  225. <div class="oneX"></div>
  226. <p>Y轴旋转：</p>
  227. <div class="oneY"></div>
  228. <p>平面旋转：</p>
  229. <div class="one"></div>
  230. <p>transform-origin定位旋转的锚点：就是设置图形按照哪一个点旋转。举例：把一张白纸使用冒顶钉在墙上，转动白纸，白纸围绕钉子转，钉子的位置就是锚点。</p>
  231. <table class="reference">
  232.  
  233.     <tbody><tr>
  234.         <th style="width:25%">值</th>
  235.         <th>描述</th>
  236.     </tr>
  237.  
  238.     <tr>
  239.         <td>x-axis</td>
  240.         <td>
  241.             <p>定义视图被置于 X 轴的何处。可能的值：</p>
  242.             <ul class="listintable">
  243.                 <li>left</li>
  244.                 <li>center</li>
  245.                 <li>right</li>
  246.                 <li><i>length</i></li>
  247.                 <li><i>%</i></li>
  248.             </ul>
  249.         </td>
  250.     </tr>
  251.  
  252.     <tr>
  253.         <td>y-axis</td>
  254.         <td>
  255.             <p>定义视图被置于 Y 轴的何处。可能的值：</p>
  256.             <ul class="listintable">
  257.                 <li>top</li>
  258.                 <li>center</li>
  259.                 <li>bottom</li>
  260.                 <li><i>length</i></li>
  261.                 <li><i>%</i></li>
  262.             </ul>
  263.         </td>
  264.     </tr>
  265.  
  266.     <tr>
  267.         <td>z-axis</td>
  268.         <td>
  269.             <p>定义视图被置于 Z 轴的何处。可能的值：</p>
  270.             <ul class="listintable">
  271.                 <li><i>length</i></li>
  272.             </ul>
  273.         </td>
  274.     </tr>
  275.     </tbody></table>
  276. <div class="oneO"></div>
  277. <p>transform-style设置旋转模式为2D还是3D。3d效果必须采用transform支持3d的方法，否则将会是2D效果。</p>
  278. <table >
  279.  
  280.     <tbody><tr>
  281.         <th style="width:25%">值</th>
  282.         <th>描述</th>
  283.     </tr>
  284.  
  285.     <tr>
  286.         <td>flat</td>
  287.         <td>表示所有子元素在2D平面呈现。</td>
  288.     </tr>
  289.  
  290.     <tr>
  291.         <td>preserve-3d</td>
  292.         <td>表示所有子元素在3D空间中呈现。</td>
  293.     </tr>
  294.     </tbody></table>
  295. <div class="one3D">3D</div>
  296. <div class="one2D">2D</div>
  297. </body>
  298. <script type="text/javascript">
  299.     var divX = document.getElementsByClassName("oneX")[];
  300.     var divY = document.getElementsByClassName("oneY")[];
  301.     var div = document.getElementsByClassName("one")[];
  302.     var divO = document.getElementsByClassName("oneO")[];
  303.     var div3D = document.getElementsByClassName("one3D")[];
  304.     var div2D = document.getElementsByClassName("one2D")[];
  305.     var i=;
  306.     setInterval(function () {
  307.         i+=;
  308.         divX.style.transform="rotateX("+i+"deg)";
  309.         divY.style.transform="rotateY("+i+"deg)";
  310.         div.style.transform="rotate("+i+"deg)";
  311.         divO.style.transform="rotate("+i+"deg)";
  312.         div3D.style.transform="rotate3d(75,75,75,"+i+"deg)";
  313.         div2D.style.transform="rotate("+i+"deg)";
  314.         if(i==){
  315.             i=;
  316.         }
  317.         /*transform: rotateY(0deg);
  318.         -moz-transform: rotateY(0deg);
  319.         -webkit-transform: rotateY(0deg);
  320.         -ms-transform: rotateY(0deg);*/
  321.  
  322.     },);
  323. </script>
  324. </html>

transform属性

只有在transform属性存在情况下transform-style和transform-origin才会有效果。

transform属性介绍：

值 描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

实例:

X轴旋转：

 

Y轴旋转：

 

平面旋转：

 

transform-origin定位旋转的锚点：就是设置图形按照哪一个点旋转。举例：把一张白纸使用冒顶钉在墙上，转动白纸，白纸围绕钉子转，钉子的位置就是锚点。

值 描述
x-axis

定义视图被置于 X 轴的何处。可能的值：

  • left
  • center
  • right
  • length
  • %
y-axis

定义视图被置于 Y 轴的何处。可能的值：

  • top
  • center
  • bottom
  • length
  • %
z-axis

定义视图被置于 Z 轴的何处。可能的值：

  • length
 

transform-style设置旋转模式为2D还是3D。3d效果必须采用transform支持3d的方法，否则将会是2D效果。

值 描述
flat 表示所有子元素在2D平面呈现。
preserve-3d 表示所有子元素在3D空间中呈现。
3D
2D

css transform旋转属性的更多相关文章

  1. CSS transform旋转问题

    我们都知道css的transform可以让旋转多少角度:transform:rotate(90deg),但是设置后只能旋转一次,如何想让它一直旋转下去怎么办?一种是使用matrix属性获取当前tran ...

  2. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  3. css制作旋转风车（transform 篇）

    做这个案例之前首先要大概了解CSS的transform的属性 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 看看效果图 打开的时候自动旋转 ...

  4. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  5. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  6. CSS Transform完全指南 #flight.Archives007

    Title/ CSS Transform完全指南 #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: 一篇最简约 ...

  7. CSS Transform完全指南(第二版) #flight.Archives007

    Title/ CSS Transform完全指南(第二版) #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: ...

  8. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  9. CSS之旋转立方体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. lookcss在深夜23:32开通

    CSS在深夜23:32开通 话说 哥也耐不住寂寞搞个网站玩玩.顺便记录一些生活和学习和工作和思想和神马的点点滴滴~ 好吧 ~本来想起个名字叫涉趣.谁知道百度了一下,已经有人叫这个名字了,杯具,貌似还是 ...

  2. JavaScript-烂笔头

    JavaScript 对大小写敏感 注释单行用:// 注释多汗用:/* */ 声明变量:var 变量名 (未使用值来声明的变量,值为undefined) JavaScript 变量均为对象 可以使用关 ...

  3. CodeForces 666B World Tour(spfa+枚举)

    B. World Tour time limit per test 5 seconds memory limit per test 512 megabytes input standard input ...

  4. WebBench----简洁优美的网站压力测试工具

    [root@c webbench]# webbench -c 10 -t 20 http://www.baidu.com/Webbench - Simple Web Benchmark 1.5Copy ...

  5. 命令行操作flask

    Flask-Script 先安装pip3 install Flask-Script from sansa import create_app from flask_script import Mana ...

  6. Qt 如何自动安装常用依赖？

    使用 *.prf 文件自动安装依赖 在 Qt\Qt5.9.5\5.9.5\msvc2015\mkspecs\features 路径中添加 auto_install.prf 文件 然后在程序配置文件(* ...

  7. 如何编译部署 UIKit 离线文档？

    如何编译部署 UIKit 离线文档? Whis is UIKit? Note:部署在 Windows 系统会出现路径错误情况,这里采用在 Debian 系统上进行编译和部署. 1. 安装一些前置工具 ...

  8. 使用Redis的五个注意事项（命名）

    原文:使用Redis的五个注意事项 下面内容来源于Quora上的一个提问,问题是使用Redis需要避免的五个问题.而回答中超出了五个问题的范畴,描述了五个使用Redis的注意事项.如果你在使用或者考虑 ...

  9. Pandas 通过追加方式合并多个csv

    常用合并 通常用pandas进行数据拼接.合并的方法有: pandas.merge() pandas.concat() pandas.append() 还有一种方式就是通过 pd.to_csv() 中 ...

  10. 《深入理解Linux内核》阅读笔记 --- 第四章 中断和异常

    1.中断的作用:中断信号提供了一种方式,使处理器转而去运行正常控制流之外的代码.当一个中断信号到达时,CPU必须停止它当前所做的事,并切换到一个新的活动.为了做到这一点,就要在内核态堆栈保存程序计数器 ...