CSS3 transform-origin属性的功能简介说明


摘要:
下文讲述css中transform-origin属性的功能简介说明,如下所示;


transform-origin属性的功能

transform-origin属性的功能:
设置元素旋转时的基准点的坐标,
1.如果进行2D转换,则可改变元素的X轴和Y轴
2.如果进行3D转换,则可同时设置元素的X轴和Y轴,Z轴的位置


transform-origin属性的语法:
transform-origin: x-axis y-axis z-axis;
———————–参数值说明———————–
x-axis:
设置元素基准点:X轴的位置,可使用的属性值
left,center,right,length,%

y-axis:
设置元素基准点:X轴的位置,可使用的属性值
top,center,bottom,length,%

z-axis
设置元素基准点:Z轴的位置,可使用的属性值
length

transform-origin属性被设置后,
 通常需结合transform旋转操作,
 才能体现出设置效果

javascript操作transform-origin属性值的方法:

object.style.transformOrigin="30% 60%"


transform-origin属性的举例


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(maomao365.com)</title>
<style>
#parentDiv
{
	position: relative;
	height: 300px;
	width: 300px;
	margin: 80px;
	padding:8px;
	border: 2px solid green;
}

#divTest
{
	padding:30px;
	position: absolute;
	border: 1px solid black;
	background-color: blue;
    color:white;font-weight:bold;
 	transform: rotate(35deg);
	transform-origin:30% 50%;
	-ms-transform: rotate(35deg); /* IE 9 */
	-ms-transform-origin:30% 50%; /* IE 9 */
	-webkit-transform: rotate(35deg); /* Safari and Chrome */
	-webkit-transform-origin:30% 50%; /* Safari and Chrome */
}
</style>
</head>

<body>
<P>
 maomao365.com<br />
 transform-origin属性测试
</p>
<hr />
<div id="parentDiv">
  <div id="divTest">猫猫教程</div>
</div>

</body>
</html>
css之transform-origin属性的示例说明

css之transform-origin属性的示例说明