css3

来源：互联网发布：淘宝蚂蚁花呗在哪开通编辑：程序博客网时间：2024/06/06 03:38

在css3中可以利用transform功能来实现文字图像的旋转、缩放、倾斜、移动这四种类型的变形处理
兼容性：

浏览器 Safari Chrome 8+ Firefox 4+ Opera 10+ 各个浏览器写法 -webkit-transform -webkit-transform -moz-transform -o-transform

1.旋转 rotate

这里写图片描述

html：

<div>示例文字</div>

css：

div {    width: 250px;    background-color: pink;    text-align: center;    margin: 200px auto;    -webkit-transform: rotate(45deg);/*兼容Chrome、Safari*/    -moz-transform: rotate(45deg);/*兼容Firefox*/    -o-transform: rotate(45deg);/*兼容Opera*/   }

解析：rotate(45deg)含义：rotate是旋转，45deg是旋转角度；旋转方向为顺时针；

2.缩放 scale

使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率，例如：scale(0.5)表示缩小50%；

这里写图片描述

html：

<div>示例文字</div>

css：

div {      width: 250px;      background-color: pink;      text-align: center;            -webkit-transform: scale(0.5);/*兼容Chrome、Safari*/      -moz-transform: scale(0.5);/*兼容Firefox*/      -o-transform: scale(0.5);/*兼容Opera*/   }

解析：
图一是原图，没有任何缩放；
图二是缩小50%；
图三是X轴缩小50%，Y轴放大2倍；即：-webkit-transform: scale(0.5,2);

3.倾斜 skew

使用skew方法来实现文字或图像的倾斜处理，在参数中分别指定水平方向倾斜角度、垂直方向倾斜角度，例如：skew(30deg,40deg)表示水平方向倾斜30度，垂直方向倾斜40度；

这里写图片描述

html：

<div>示例文字</div>

css：

  div {      width: 200px;      background-color: pink;      text-align: center;            -webkit-transform: skew(30deg,30deg);/*兼容Chrome、Safari*/      -moz-transform: skew(30deg,30deg);/*兼容Firefox*/      -o-transform: skew(30deg,30deg);/*兼容Opera*/   }

解析：如果skew():中参数只写一个，代表只在水平方向上进行倾斜，垂直方向上不倾斜；如图二；

4.移动 translate

使用translate方法来实现文字或图像的移动处理，在参数中分别指定水平方向移动距离、垂直方向移动距离，例如：translate(50px,50px)表示水平方向移动50px，垂直方向移动50px；

css：

div {      width: 200px;      background-color: pink;      text-align: center;           -webkit-transform: translate(50px,50px);/*兼容Chrome、Safari*/      -moz-transform: translate(50px,50px);/*兼容Firefox*/      -o-transform: translate(50px,50px);/*兼容Opera*/   }

5.综合使用

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

这里写图片描述

html:

<div class="a"></div><div class="b"></div>

第一张图不修改基准点的css：

div {   display: inline-block;    width: 100px;    height: 100px;}div.a {          background-color: pink;}div.b {          background-color: green;          -webkit-transform: rotate(45deg);/*兼容Chrome、Safari*/    -moz-transform: rotate(45deg);/*兼容Firefox*/    -o-transform: rotate(45deg);/*兼容Opera*/}

第二张修改基准点的css：

div {    display: inline-block;    width: 100px;    height: 100px;}div.a {          background-color: pink;} div.b {          background-color: green;          -webkit-transform: rotate(45deg);/*兼容Chrome、Safari*/    -moz-transform: rotate(45deg);/*兼容Firefox*/    -o-transform: rotate(45deg);/*兼容Opera*/    /*修改变形基准点*/    -webkit-transform-origin: left bottom;/*兼容Chrome、Safari*/    -moz-transform-origin: left bottom;/*兼容Firefox*/    -o-transform-origin: left bottom;/*兼容Opera*/      }

解析：
transform-origin参数分别是：基准点在水平方向上的位置(left、center、right)、基准点在垂直方向上的位置(top、center、bottom)；
其中水平方向上的位置中可取值为：left、center、right;
垂直方向上的位置中可取值为：top、center、bottom;

1 0