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. 020 <one-to-one>、<many-to-one>单端关联上的lazy(懒加载)属性

    <one-to-one>.<many-to-one>单端关联上,可以取值:false/proxy/noproxy(false/代理/不代理) 实例一:所有lazy属性默认(支持 ...

  2. linux压缩及vi操作

    一:Linux的压缩方式 1.tar cvf 对文件进行压缩,tar cvf+压缩文件完成的命名+需要压缩的文件 2,tar -tf +命名的压缩文件:表示查看目录里面的内容 3,tar -xf 解压 ...

  3. 浅谈MVC数据验证

    一.一般情况 对于使用过MVC框架的人来说,对MVC的数据验证不会陌生,比如,我有一个Model如下: public class UserInfo { [Required(ErrorMessage = ...

  4. unittest模块的常用方法：

    unittest模块的常用方法: assertEqual(a, b)     a == b assertNotEqual(a, b)     a != b assertTrue(x)     bool ...

  5. loadrunner提高篇-结果分析实践

    分析图合并 一.分析图合并原理 选择view->merge graphs,弹出如图1所示对话框 图1(设置合并图) 1.选择要合并的图.选择一个要与当前活动图合并的图,注意这里只能选择X轴度量单 ...

  6. Coursera 机器学习笔记（五）

    主要第七周的内容:支持向量机 可以参考JerryLeed 的支持向量机SVM系列博客http://www.cnblogs.com/jerrylead 以及 pluskid的支持向量机系列博客http: ...

  7. IE低版本兼容的感悟

    2017-04-09 曾经折磨一代人的兼容问题,如今也在同样折磨着我们,明明可以做JS判断来避免对ie低版本的兼容,但是却还是耐心的做着兼容,你可能会问这是为什么, 我们调的不是兼容,是整整一代人的情 ...

  8. Dojo初探之1：AMD规范，编写符合AMD规范（异步模块加载机制）的模块化JS(其中dojo采用1.11.2版本)

    一.AMD规范探索 1.AMD规范(即异步模块加载机制) 我们在接触js的时候,一般都是通过各种function来定义一些方法,让它们帮我们做一些事情,一个js可以包含很多个js,而这些functio ...

  9. homebrew & brew cask使用技巧及Mac软件安装

    homebrew 安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m ...

  10. 基于Petri网的工作流分析和移植

    基于Petri网的工作流分析和移植 一.前言 在实际应用场景,包括PEC的订单流程从下订单到订单派送一直到订单完成都是按照一系列预先规定好的工作流策略进行的. 通常情况下如果是采用面向过程的编程方法, ...