CSS3中Transform动画属性用法详解(9)

发布时间：2020-03-15 08:13 所属栏目：52 来源：站长网

导读：transform-origin:100%100%;/*W3C标准*/ -ms-transform-origin:100%100%;/*IE9*/ -moz-transform-origin:100%100%;/*Firefox*/ -webkit-transform-origin:100%100%;/*Safari和Chrome*/ -o-transform-origin:100%100

transform-origin:100% 100%; /* W3C标准 */

-ms-transform-origin:100% 100%; /* IE 9 */

-moz-transform-origin:100% 100%; /* Firefox */

-webkit-transform-origin:100% 100%; /* Safari 和 Chrome */

-o-transform-origin:100% 100%;

}

</style>

</head>

<body>

<div>translate(基点为(left top)</div>

</div>

<div>rotate(基点为(0%, 0%)</div>

</div>

<div>scale(基点为(center, top)</div>

</div>

</div>

</body>

</html>

效果如下：

CSS3中Transform动画属性用法详解

对比发现：translate()方法与之前的没有区别，其他三个方法基点改变了，图形变形效果也有所变化。

3D transform变换方法

Internet Explorer 10 和 Firefox 支持 3D 转换.
Chrome 和 Safari 必须添加前缀 -webkit-.
Opera 还不支持 3D 转换(支持 2D 转换 ).

（编辑：ASP站长网）