text-transform 属性.ppt

text-transform 属性 一、在CSS1中，控制英文及拼音大小写； 二、在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。 二、在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形 注意：skew方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这可不是说水平方向和垂直方向一样，这种情况视为只在水平方向倾斜，垂直方向上不倾斜。 注意：translate方法中的两个参数也可以修改成只使用一个参数，跟skew方法类似，省略另一个参数，这种情况视为只在水平方向移动，垂直方向上不移动。 下面把上面代码中几个变形方法的顺序调整一下，先旋转(顺时针旋转45度)，然后缩放(放大1.5倍)，移动(向右移动150px，向下移动200px), 看看结果怎样： 通过上面两个示例可以看出，元素在两个页面上所处位置并不相同，为什么会这样呢？先看第一个例子：首先向右移动150px，向下移动200px，元素的中心点在水平方向先移动150px，再在垂直方向向下移动200px，然后在旋转45度，放大1.5倍。第二个例子：首先旋转45度，并且放大了1.5倍，这时候元素是倾斜了45度角的，在移动的话，元素就是按45度角的方向向右移动150px，向下移动200px是沿着与水平方向呈225度方向移动的。看下下面的示意图就很明显了： 指定变形的基准点：　　使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。 例六：两个div元素，首先不改变变形的基准点，将第二个div元素进行旋转。 下面使用transform-origin属性把变形的基准点修改为第二个元素的左下角，代码如下： 指定transform-origin属性值的时候，采用“基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置”的方法，其中“基准点在元素水平方向上的位置”中可以指定的值为left、center、right，“基准点在垂直方向上的位置”中可以指定的值为top、center、bottom。 TKANK YOU! * * 一、在CSS1中，控制英文及拼音大小写； 在CSS3中，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、scale、skew和translate这四种方法来实现。将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。 　　目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+ 　　一、旋转： 　　CSS中使用rotate方法来实现对元素的旋转，在参数中加入角度值，旋转方式为顺时针旋转。 *