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. Spring Boot 2.x （十）：构建优雅的RESTful接口

    RESTful 相信在座的各位对于RESTful都是略有耳闻,那么RESTful到底是什么呢? REST(Representational State Transfer)表述性状态转移是一组架构约束条 ...

  2. Perl IO：文件锁

    文件锁 当多个进程或多个程序都想要修同一个文件的时候,如果不加控制,多进程或多程序将可能导致文件更新的丢失. 例如进程1和进程2都要写入数据到a.txt中,进程1获取到了文件句柄,进程2也获取到了文件 ...

  3. webpack4.0各个击破（7）—— plugin篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  4. 第62章 EntityFramework支持 - Identity Server 4 中文文档(v1.0.0)

    为IdentityServer中的配置和操作数据扩展点提供了基于EntityFramework的实现.EntityFramework的使用允许任何EF支持的数据库与此库一起使用. 这个库的仓库位于这里 ...

  5. Vs Code 插件配置教程

    1 Vs Code 下载地址:https://code.visualstudio.com/ 2   安装好Vs Code,点击启动,点击File-> Open Folder 打开项目 3 点击E ...

  6. 斐波那契数列 （C#）

    斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一 ...

  7. excel使用poi操作。

    String real_path = request.getSession().getServletContext().getRealPath("/");//获取文件路径,我是通过 ...

  8. WEB 实时推送技术的总结

    前言 随着 Web 的发展,用户对于 Web 的实时推送要求也越来越高 ,比如,工业运行监控.Web 在线通讯.即时报价系统.在线游戏等,都需要将后台发生的变化主动地.实时地传送到浏览器端,而不需要用 ...

  9. C++语法小技巧

    前言 写的很乱,各种内容都有.仅仅是为了记录一下 而且内容极其不严谨(没错,只有实践,没有理论)!请各位谨慎驾驶! 强制内联 #define Inline __inline__ __attribute ...

  10. ios手机录屏软件哪个好

    苹果手机中的airplay镜像,是苹果手机系统的一大特色,可以轻松把手机屏幕投射电脑,这个功能使苹果手机相较安卓手机投屏会更加轻松,那么如何实现苹果手机投射电脑屏幕?下面小编便来分享ios手机录屏软件 ...