zoukankan      html  css  js  c++  java
  • 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

    CSS3中的变形处理(transform)属

    transform的功能分类

    1.旋转

    CSS3中的变形处理(transform)属性,PS教程,思缘教程网

    transform:rotate(45deg);

    该语句使div元素顺时针旋转45度。deg是CSS 3的“Values and Units”模块中定义的一个角度单位。

    2.缩放

    CSS3中的变形处理(transform)属性,PS教程,思缘教程网

    transform:scale(0.8,1);

    使用缩放的方法实现文字或图像的缩放效果,在参数中指定缩放倍率。该语句使用scale方法使该元素在水平方向上缩小了20%,垂直方向上不缩放。

    3.倾斜

    CSS3中的变形处理(transform)属性,PS教程,思缘教程网

    transform:skew(30deg,0deg);

    该实例通过skew方法把元素水平方向上倾斜30度,处置方向保持不变。

    4.移动

    CSS3中的变形处理(transform)属性,PS教程,思缘教程网

    translate(50px,50px);

    使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

    指定变形的基准点

    CSS3中的变形处理(transform)属性,PS教程,思缘教程网

    在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-orign属性,可以改变变形的基准点。

    transorm-origin:left bottom;

    left和bottom是基准点在元素水平方向和垂直方向上的位置。

    对一个元素使用多种变形方法

    CSS3中的变形处理(transform)属性,PS教程,思缘教程网

    transform:rotate(45deg) scale(1.5) translate(50px,0px);

    该综合实例中对文字或图像先旋转45度,再缩放1.5倍,最后在水平方向移动150像素,在垂直方向移动200像素。

    目前transform属性在WebKit引擎的Web浏览器上需要添加“-webkit-”前缀,在Fifefox浏览器需要添加“-moz-”前缀,Opera浏览器上需要需要添加“-o-”前缀

  • 相关阅读:
    BZOJ1912 [Apio2010]patrol 巡逻
    BZOJ2432 [Noi2011]兔农
    BZOJ1010 [HNOI2008]玩具装箱toy
    BZOJ3240 [Noi2013]矩阵游戏
    洛谷【P1303】A*B Problem
    洛谷【2142】高精度减法
    洛谷【P1100】高低位交换
    OIer应该知道的二进制知识
    洛谷【P3908】异或之和
    洛谷【P2431】正妹吃月饼
  • 原文地址:https://www.cnblogs.com/langwo/p/7076616.html
Copyright © 2011-2022 走看看