指定变形的基准点
在使用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。