您当前的位置:首页 > 网站建设笔记 >

transform-origin指定变形的基准点

0

指定变形的基准点

在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。在样式代码中,使用Safari浏览器或Chrome浏览器的时候,需要将其书写成“-webkit-transform-origin”的形式;使用Firefox浏览器的时候,需要将其书写成“-moz-transform-origin”的形式;使用Opera浏览器的时候,需要书写成“-o-transform-origin”的形式。

接下来,我们在代码清单18-7中看一个示例,该示例中有两个div元素。首先我们不改变变形的基准点,并且将第二个div元素进行旋转,然后看一下该示例的运行结果。

代码清单18-7 不改变变形的基准点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不改变变形的基准点</title>
<style type="text/css">
div {
	width: 200px;
	height: 200px;
	display: inline-block;
}
div#a {
	background-color: pink;
}
div#b {
	background-color: green;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

代码清单18-7的运行结果如下图所示。

不改变变形的基准点
不改变变形的基准点

接下来,我们使用transform-origin属性把变形的基准点修改为第二个元素的左下角处,样式代码如下所示。

<style type="text/css">
div {
	width: 200px;
	height: 200px;
	display: inline-block;
}
div#a {
	background-color: pink;
}
div#b {
	background-color: green;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	/*
	修改变形基准点
	*/
	-webkit-transform-origin: left bottom;
	-moz-transform-origin: left bottom;
	-o-transform-origin: left bottom;
}
</style>

将这段样式代码替换到代码清单18-7的样式代码中,然后重新运行该示例,运行后的结果如下图所示。


修改变形的基准点为元素的左下角处

指定transform-origin属性值的时候,采用“基准点在元素水平方向上的位置,基准点在元素垂直方向上的位置”的方法,其中“基准点在元素水平方向上的位置”中可以指定的值为left、center、right。“基准点在元素垂直方向上的位置”中可以指定的值为top、center、bottom。

顶部中部底部