transform功能

  • 放缩

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>scale方法使用示例</title>

    <style>

        div {

            width: 300px;

            margin: 150px auto;

            background-color: yellow;

            text-align: center;

            -webkit-transform: scale(0.5);

            -moz-transform: scale(0.5);

            -o-transform: scale(0.5);

        }

    </style>

</head>

<body>

<div>示例文字</div>

</body>

</html>

另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率，例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>scale方法使用示例</title>

    <style>

        div {

            width: 300px;

            margin: 150px auto;

            background-color: yellow;

            text-align: center;

            -webkit-transform: scale(0.5,2);

            -moz-transform: scale(0.5,2);

            -o-transform: scale(0.5,2);

        }

    </style>

</head>

<body>

<div>示例文字</div>

</body>

</html>
  • 倾斜

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>skew方法使用示例</title>

    <style>

        div {

            width: 300px;

            margin: 150px auto;

            background-color: yellow;

            text-align: center;

            -webkit-transform: skew(30deg, 30deg);

            -moz-transform: skew(30deg,30deg);

            -o-transform: skew(30deg,30deg);

        }

    </style>

</head>

<body>

<div>示例文字</div>

</body>

</html>
  • 旋转

使用rotate方法将元素进行旋转，共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>对元素使用多重变形的示例</title>

    <style>

        div {

            margin: 100px;

            width: 300px;

            background-color: yellow;

            text-align: center;

            -webkit-transform:rotate(30deg);

            -moz-transform:rotate(30deg);

            -o-transform:rotate(30deg);

        }

    </style>

</head>

<body>

<div>示例文字</div>

</body>

</html>
  • 移动

使用translate方法来将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>translate方法使用示例</title>

    <style>

        div {

            width: 300px;

            margin: 150px auto;

            background-color: yellow;

            text-align: center;

            -webkit-transform: translate(50px,50px);

            -moz-transform: translate(50px,50px);

            -o-transform: translate(50px,50px);

        }

    </style>

</head>

<body>

<div>示例文字</div>

</body>

</html>
  • 变形示例

示例1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>对元素使用多重变形的示例</title>

    <style>

        div {

            width: 300px;

            background-color: yellow;

            text-align: center;

            -webkit-transform: translate(150px,200px) rotate(45deg) scale(1.5);

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

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

        }

    </style>

</head>

<body>

<div>示例文字</div>

</body>

</html>

这个例子是先移动，然后旋转，最后放缩

效果：

示例2：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>对元素使用多重变形的示例</title>

    <style>

        div {

            width: 300px;

            background-color: yellow;

            text-align: center;

            -webkit-transform:rotate(45deg) scale(1.5) translate(150px,200px);

            -moz-transform:rotate(45deg) scale(1.5) translate(150px,200px);

            -o-transform: rotate(45deg) scale(1.5) translate(150px,200px);

        }

    </style>

</head>

<body>

<div>示例文字</div>

</body>

</html>

先旋转，然后在放缩，最后移动

效果：

从两个示例的运行结果中我们可以看出，元素在两个页面上所处于位置并不相同。我们来看看他们的的详细步骤：

第一个示例：

1）  首先向右移动150px，向下移动200px。

2）  然后旋转45度，并且放大1.5倍。

第二个示例：

1）  首先旋转45度，并且放大1.5倍。

2）  然后向右移动150px，向下移动200px。

css3学习系列之移动的更多相关文章

  1. css3学习系列之选择器（一）

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  2. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  3. CSS3学习系列之选择器（四）

    使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...

  4. CSS3学习系列之字体

    给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...

  5. CSS3学习系列之盒样式（一）

    盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...

  6. CSS3学习系列之盒样式（二）

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  7. CSS3学习系列之背景相关样式（一）

    新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...

  8. CSS3学习系列之背景相关样式（二）

    在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...

  9. CSS3学习系列之动画

    Transitions功能使用方法 在css3中,transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能,可通过transitions属性来使用t ...

  10. CSS3学习系列之布局样式（一）

    多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang ...

随机推荐

  1. DSAPI 获取实时统计信息CPU/内存/硬盘/网络

    有时,我们需要获取当前计算机中CPU.内存.硬盘.网络等实时信息,如下图:\ 要实现上述几项信息的获取,通常需要使用Timer控件来间隔获取,以便刷新最新的数据. 本示例中,放一个Timer控件,放一 ...

  2. 读书笔记之第五回深入浅出关键字---把new说透

    第五回深入浅出关键字---把new说透  ------你必须知道的.net读书笔记 new一个class时,new完成了以下两个方面的内容:一是调用newobj命令来为实例在托管堆中分配内存:二是调用 ...

  3. [android]android项目的目录结构

    /**************2016年4月23更新*********************/ 相关技术: 知乎:用eclipse做Android开发,新建工程时应如何选择Android的版本? 肥 ...

  4. 40K刚面完Java岗，这些技术必须掌握

    学习是一份苦差事,这句话真的不是说说而已,真的是你认真学习过,才会懂得,学习是多么的辛苦,这点我深有体会,但是我还是想说,没办法,想要更好的生活,你就要不断地努力学习. 所幸的是,程序员这个行业,学习 ...

  5. 开源介绍·新款简约、实用与大气的Hexo新主题：BMW

    这是一个简约.大气.实用的Hexo新主题:BMW

  6. C#面试分享：单例模式

    C#面试分享:单例模式 提问1:请给出单例模式的实现: 答: public class Animal { private static Animal _instance = null; private ...

  7. Net中获取程序集路径

      从内存中加载的程序集,无路径   IIS中路径 protected void Page_Load(object sender, EventArgs e) { Response.Write(&quo ...

  8. 广州.NET微软技术俱乐部 - 动手实验室

    本文正在写草稿中, 发布时会在群里单独通知

  9. Android Studio 代码无提示，无颜色区分

    一.问题 ①java代码没有颜色区分,统一黑色 ②代码不会联想提示,原来打前几个字母便会联想到后面的内容 二.解决 打开File,将Power save Mode的勾勾去掉

  10. WPF：使用TypeConverter

    所谓TypeConverter就是类型转换器,支持两种类型之间相互转换 你可以重写转换逻辑,只要你清楚转换的协议,就可以实现类型互转. 定义一个Person类型,具有一个int类型的Age属性: pu ...