©
本文档使用
php中文网手册 发布
transform-origin:[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
默认值:50% 50%,效果等同于center center
适用于:所有块级元素及某些内联元素
继承性:无
动画性:当值为数值时
计算值:除了指定绝对值,否则都为百分比
媒体:视觉
<percentage>:用百分比指定坐标值。可以为负值。
<length>:用长度值指定坐标值。可以为负值。
left:指定原点的横坐标为left
center①:指定原点的横坐标为center
right:指定原点的横坐标为right
top:指定原点的纵坐标为top
center②:指定原点的纵坐标为center
bottom:指定原点的纵坐标为bottom
该属性提供2个参数值。
如果提供两个,第一个用于横坐标,第二个用于纵坐标。
如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。
对应的脚本特性为transformOrigin。
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-8.0 | 2.0-3.0 | 4.0-35.0-webkit- | 6.0-8.0-webkit- | 15.0-22.0-webkit- | 6.0-8.4-webkit- | 2.1-4.4.4-webkit- | 18.0-34.0-webkit- |
| 9.0-ms- | 3.5-15.0-moz- | 36.0+ | 9.0+ | 23.0+ | 9.0+ | 40.0+ | 35.0+ | |
| 10.0+ | 16.0+ |
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>transform-origin_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{margin:0;padding:0;list-style:none;border:1px solid #000;}
.test li{width:50px;height:50px;border:1px solid #000;background:#ddd;
-moz-transform-origin:0 0;-moz-transform:rotate(45deg);
-webkit-transform-origin:0 0;-webkit-transform:rotate(45deg);
-ms-transform-origin:0 0;-ms-transform:rotate(45deg);
transform-origin:0 0;transform:rotate(45deg);
}
</style>
</head>
<body>
<ul class="test">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
点击 "运行实例" 按钮查看在线实例