您尚未登录，无法添加相关文章。 - 登录

新用户？

哎呀，出了点小问题，您可以稍后重试！

未填写内容或格式不正确！

CSS3 transform-origin使用参考指南

浏览：31557次

相关技术文章博览

我要添加++

基础知识(由张鑫旭整理编辑)[我要纠错]

语法：

transform-origin ： [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]

取值：
transform-origin ：
初始值： 50% 50%
说明：

应用于block水平和inline水平的元素。

引擎类型 Gecko Webkit Presto
transform -moz-transform-origin -webkit-transform-origin  
       
兼容性：
类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (×)Firefox 2.0 (√)Chrome 1.0.x (×)Opera 9.63 (√)Safari 3.1
(×)IE7 (×)Firefox 3.0 (√)Chrome 2.0.x (√)Safari 4
(×)IE8 (√)Firefox 3.5
 

代码与实例

CSS代码：
.transform{
    -moz-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px); 
    -webkit-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px);
}
HTML代码：
<img class="transform" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
效果截图
CSS3 transform-origin效果截图
查看demo原页面>>

拓展知识点（由各前端同仁提供）

尚未添加拓展知识点！我来添加++
图片地址是：取消
插入：

我要分享

分享到：1