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 转换。