CSS3之转换

transform属性向元素应用2D或3D转换

  指定一组转换函数,取值—transform:none/transform-function;  

    none:默认值,表示元素不进行转换

    transform-function:表示一个或多个转换函数,中间以空格分开

转换的原点

  transform-origin属性用来指定元素的转换原点位置

    默认情况下,转换的原点在元素的中心点(或者是X轴和Y轴的50%处)

    transform-origin:数值/百分比/关键字

      一个值:表示所有轴的位置

      —两个值:表示X轴和Y轴

      —三个值:表示X轴、Y轴和Z轴

div{
    width:100px;
    height:100px;
    border:1px solid black;
    background-color:#ccc;
}
div.trans{
    transform:rotate(90deg) scale(0.8);
}

div{
    width:100px;
    height:100px;
    border:1px solid black;
    background-color:#eee;
}
#d1{
    transform:rotate(90deg);
   transform-origin:bottom right; }

 

Transform

•定义和用法
•transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
•rotate(angle )定义 2D 旋转,在参数中规定角度
•rotateX(angle)定义沿着 X 轴的 3D 旋转。
•rotateY(angle)定义沿着 Y 轴的 3D 旋转。
•rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
•scale(x,y)定义 2D 缩放转换。
•scale3d(x,y,z)定义 3D 缩放转换。
•scaleX(x)通过设置 X 轴的值来定义缩放转换。
•scaleY(y)通过设置 Y 轴的值来定义缩放转换。
•scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。

•浏览器支持
•Internet Explorer 10、Firefox、Opera 支持 transform 属性。
•Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
•Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
•Opera 只支持 2D 转换。

posted on 2016-01-22 21:25  木杉彬彬彬  阅读(172)  评论(0编辑  收藏  举报