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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>transform属性</title>

</head>

<style type="text/css">

     .oneX{

        border: 2px crimson solid;

        background-color: chartreuse;

        width: 100px;

        height: 100px;

         transform: rotateX(0deg);

         -moz-transform: rotateX(0deg);

         -webkit-transform: rotateX(0deg);

         -ms-transform: rotateX(0deg);

    }

     .oneY{

         border: 2px crimson dashed;

         background-color: chartreuse;

         width: 100px;

         height: 100px;

         transform: rotateY(0deg);

         -moz-transform: rotateY(0deg);

         -webkit-transform: rotateY(0deg);

         -ms-transform: rotateY(0deg);

     }

     .one{

         border: 2px crimson dashed;

         background-color: chartreuse;

         width: 100px;

         height: 100px;

     }

     .oneO{

         border: 2px crimson dashed;

         background-color: chartreuse;

         width: 100px;

         height: 100px;

         margin: 150px;

         transform-origin:  ;

         -webkit-transform-origin:  ;

         -ms-transform-origin:  ;

         -moz-transform-origin:  ;

         -webkit-transform-style: preserve-3d;

     }

     .one3D{

         border: 2px crimson dashed;

         background-color: chartreuse;

         width: 100px;

         height: 100px;

         margin: 150px;

         transform-origin: % % 75px;

         -webkit-transform-origin: % % 75px;

         -ms-transform-origin:  % % 75px;

         -moz-transform-origin:  % % 75px;

         -webkit-transform-style: preserve-3d;

         transform-style: preserve-3d;

         -moz-transform-style: preserve-3d;

         -ms-transform-style: preserve-3d;

         box-shadow: 10px 10px 5px #;

     }

     .one2D{

         border: 2px crimson dashed;

         background-color: chartreuse;

         width: 100px;

         height: 100px;

         margin: 150px;

         transform-origin: % % 75px;

         -webkit-transform-origin: % % 75px;

         -ms-transform-origin:  % % 75px;

         -moz-transform-origin:  % % 75px;

         -webkit-transform-style: flat;

         transform-style: flat;

         -moz-transform-style: flat;

         -ms-transform-style: flat;

         box-shadow: 10px 10px 5px #;

     }

</style>

<body>

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

<p>transform属性介绍：</p>

<table>

    <tbody><tr>

        <th style="width:25%">值</th>

        <th>描述</th>

    </tr>

    <tr>

        <td>none</td>

        <td>定义不进行转换。</td>

    </tr>

    <tr>

        <td>matrix(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td>

        <td>定义 2D 转换，使用六个值的矩阵。</td>

    </tr>

    <tr>

        <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>

        <td>定义 3D 转换，使用  个值的 4x4 矩阵。</td>

    </tr>

    <tr>

        <td>translate(<i>x</i>,<i>y</i>)</td>

        <td>定义 2D 转换。</td>

    </tr>

    <tr>

        <td>translate3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>

        <td>定义 3D 转换。</td>

    </tr>

    <tr>

        <td>translateX(<i>x</i>)</td>

        <td>定义转换，只是用 X 轴的值。</td>

    </tr>

    <tr>

        <td>translateY(<i>y</i>)</td>

        <td>定义转换，只是用 Y 轴的值。</td>

    </tr>

    <tr>

        <td>translateZ(<i>z</i>)</td>

        <td>定义 3D 转换，只是用 Z 轴的值。</td>

    </tr>

    <tr>

        <td>scale(<i>x</i>[,<i>y</i>]?) </td>

        <td>定义 2D 缩放转换。</td>

    </tr>

    <tr>

        <td>scale3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>

        <td>定义 3D 缩放转换。</td>

    </tr>

    <tr>

        <td>scaleX(<i>x</i>)</td>

        <td>通过设置 X 轴的值来定义缩放转换。</td>

    </tr>

    <tr>

        <td>scaleY(<i>y</i>)</td>

        <td>通过设置 Y 轴的值来定义缩放转换。</td>

    </tr>

    <tr>

        <td>scaleZ(<i>z</i>)</td>

        <td>通过设置 Z 轴的值来定义 3D 缩放转换。</td>

    </tr>

    <tr>

        <td>rotate(<i>angle</i>)</td>

        <td>定义 2D 旋转，在参数中规定角度。</td>

    </tr>

    <tr>

        <td>rotate3d(<i>x</i>,<i>y</i>,<i>z</i>,<i>angle</i>)</td>

        <td>定义 3D 旋转。</td>

    </tr>

    <tr>

        <td>rotateX(<i>angle</i>)</td>

        <td>定义沿着 X 轴的 3D 旋转。</td>

    </tr>

    <tr>

        <td>rotateY(<i>angle</i>)</td>

        <td>定义沿着 Y 轴的 3D 旋转。</td>

    </tr>

    <tr>

        <td>rotateZ(<i>angle</i>)</td>

        <td>定义沿着 Z 轴的 3D 旋转。</td>

    </tr>

    <tr>

        <td>skew(<i>x-angle</i>,<i>y-angle</i>)</td>

        <td>定义沿着 X 和 Y 轴的 2D 倾斜转换。</td>

    </tr>

    <tr>

        <td>skewX(<i>angle</i>)</td>

        <td>定义沿着 X 轴的 2D 倾斜转换。</td>

    </tr>

    <tr>

        <td>skewY(<i>angle</i>)</td>

        <td>定义沿着 Y 轴的 2D 倾斜转换。</td>

    </tr>

    <tr>

        <td>perspective(<i>n</i>)</td>

        <td>为 3D 转换元素定义透视视图。</td>

    </tr>

    </tbody></table>

<p>实例:</p>

<p>X轴旋转：</p>

<div class="oneX"></div>

<p>Y轴旋转：</p>

<div class="oneY"></div>

<p>平面旋转：</p>

<div class="one"></div>

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

<table class="reference">

    <tbody><tr>

        <th style="width:25%">值</th>

        <th>描述</th>

    </tr>

    <tr>

        <td>x-axis</td>

        <td>

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

            <ul class="listintable">

                <li>left</li>

                <li>center</li>

                <li>right</li>

                <li><i>length</i></li>

                <li><i>%</i></li>

            </ul>

        </td>

    </tr>

    <tr>

        <td>y-axis</td>

        <td>

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

            <ul class="listintable">

                <li>top</li>

                <li>center</li>

                <li>bottom</li>

                <li><i>length</i></li>

                <li><i>%</i></li>

            </ul>

        </td>

    </tr>

    <tr>

        <td>z-axis</td>

        <td>

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

            <ul class="listintable">

                <li><i>length</i></li>

            </ul>

        </td>

    </tr>

    </tbody></table>

<div class="oneO"></div>

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

<table >

    <tbody><tr>

        <th style="width:25%">值</th>

        <th>描述</th>

    </tr>

    <tr>

        <td>flat</td>

        <td>表示所有子元素在2D平面呈现。</td>

    </tr>

    <tr>

        <td>preserve-3d</td>

        <td>表示所有子元素在3D空间中呈现。</td>

    </tr>

    </tbody></table>

<div class="one3D">3D</div>

<div class="one2D">2D</div>

</body>

<script type="text/javascript">

    var divX = document.getElementsByClassName("oneX")[];

    var divY = document.getElementsByClassName("oneY")[];

    var div = document.getElementsByClassName("one")[];

    var divO = document.getElementsByClassName("oneO")[];

    var div3D = document.getElementsByClassName("one3D")[];

    var div2D = document.getElementsByClassName("one2D")[];

    var i=;

    setInterval(function () {

        i+=;

        divX.style.transform="rotateX("+i+"deg)";

        divY.style.transform="rotateY("+i+"deg)";

        div.style.transform="rotate("+i+"deg)";

        divO.style.transform="rotate("+i+"deg)";

        div3D.style.transform="rotate3d(75,75,75,"+i+"deg)";

        div2D.style.transform="rotate("+i+"deg)";

        if(i==){

            i=;

        }

        /*transform: rotateY(0deg);

        -moz-transform: rotateY(0deg);

        -webkit-transform: rotateY(0deg);

        -ms-transform: rotateY(0deg);*/

    },);

</script>

</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. WebService之XFire和SOAP实例(基于JAVA)

    开发环境:jdk1.6 + Tomcat7 + MyEclipse10 源码下载地址张贴在文章最后面:首先是使用WSDL协议实现:这里使用XFire XFire一个免费.开源的SOAP框架,它构建了P ...

  2. vue+node+mongoDB 火车票H5（二）---vux和less的配置

    vue基本环境配置好之后,就可以开始开发页面了 开发页面之前先了解一下项目结构,原始的目录结构为: config是配置文件,环境配置好了开发阶段可以不再去修改了,node_modules文件夹是打包的 ...

  3. 160804、oracle查询:取出每组中的第一条记录

    oracle查询:取出每组中的第一条记录按type字段分组,code排序,取出每组中的第一条记录 方法一: select type,min(code) from group_info group by ...

  4. mysql 中 select中 用case

    将 countertype 整数类型转成字符串类型 SELECT counterType, CASE counterType WHEN 1 THEN 'CTP'WHEN 2 THEN 'NULL'WH ...

  5. ES6 Promise对象then方法链式调用

    then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...

  6. 洛谷 P2331 [SCOI2005]最大子矩阵

    洛谷 这一题,乍一眼看上去只想到了最暴力的暴力--大概\(n^4\)吧. 仔细看看数据范围,发现\(1 \leq m \leq 2\),这就好办了,分两类讨论. 我先打了\(m=1\)的情况,拿了30 ...

  7. 三.实例演示insert/update/delect更新数据库

    1.逻辑图 2.只是准备 3.代码展示 import pymysql conn=pymysql.connect( host='192.168.199.249', port=3306, user='ro ...

  8. Django内置分页器

    分页 在Django中实现分页功能非常简单.因为Django已经内置了两个处理分类的类.分别是Paginator和Page.Paginator用来管理整个分类的一些属性,Page用来管理当前这个分页的 ...

  9. 解决[[NSFileManager defaultManager] contentsOfDirectoryAtPath 方法获取不到数据的bug

    在说这个问题之前,必须先解释一下,我们在引入project的时候,xcode会给我们3个选项 1.Copy items if needed 主要是说明,是否要将文件复制到project所在文件夹. 假 ...

  10. centos Docker安装前升级内核3.10的方法

    首先我虚拟机系统都是Centos 6.5 .ESXI ,后安装devel .ESXI 后来 .ESXI 我所操作的都是虚拟机,但是在真实机上面如何我就不清楚了~~ 大家一定要记得安装步骤,,,不然就是 ...