html里变形原点英文,transform-origin[变形原点]

语法

transform-origin: [ [ | | left | center | right ] [ | | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]

语法项目

说明

初始值

center center，效果等同于 50% 50%

适用于

块元素和行内元素

可否继承

否

媒介

视觉

版本

CSS3.0

说明

transform的参照点默认为元素的中心点，如果要改变这个参照点，可以是用transform-origin属性进行自定义。

受影响变形函数：rotate()。

取值

该属性提供2个参数值，第一个用于横坐标，第二个用于纵坐标；如果只提供一个，该值将用于横坐标，纵坐标将默认为50%。

percentage：用百分比指定坐标值。可以为负值。

length：用长度值指定坐标值。可以为负值。

left center right是水平方向取值，而top center bottom是垂直方向的取值。

实例代码

CSS

.origin_1{

-webkit-transform-origin:center center;

-moz-transform-origin:center center;

-webkit-transition:0.5s ease all;

-moz-transition:0.5s ease all;

position:absolute;

left:10px;

top:50px;

}

.origin_2{

-webkit-transform-origin:left top;

-moz-transform-origin:left top;

-webkit-transition:0.5s ease all;

-moz-transition:0.5s ease all;

position:absolute;

left:250px;

top:50px;

}

.origin_3{

-webkit-transform-origin:100% 100%;

-moz-transform-origin:100% 100%;

-webkit-transition:0.5s ease all;

-moz-transition:0.5s ease all;

position:absolute;

left:480px;

top:50px;

}

.origin_4{

-webkit-transform-origin:20px 60px;

-moz-transform-origin:20px 60px;

-webkit-transition:0.5s ease all;

-moz-transition:0.5s ease all;

position:absolute;

left:250px;

top:160px;

}

.origin_1:hover,

.origin_2:hover,

.origin_3:hover,

.origin_4:hover{

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

}

html

在中心点旋转45度

在左上角旋转45度

用百分百值来来设置旋转点旋转45度

用长度值来设置旋转点旋转45度

兼容性

IE

Firefox

Opera

Safari

Chrome

IE 10+

Firefox 3.5+

Opera 11.50+

Safari 10+

Chrome 2.0+

上一篇: 关联属性下一篇: perspective-origin[透视原点]