css3学习系列之移动属性详解


Posted in HTML / CSS onJuly 04, 2017

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>

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

效果:

css3学习系列之移动属性详解

示例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>

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

 效果:

css3学习系列之移动属性详解

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

第一个示例:

1)  首先向右移动150px,向下移动200px。

css3学习系列之移动属性详解 

2)  然后旋转45度,并且放大1.5倍。

css3学习系列之移动属性详解 

第二个示例:

1)  首先旋转45度,并且放大1.5倍。

css3学习系列之移动属性详解 

2)  然后向右移动150px,向下移动200px。

 css3学习系列之移动属性详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3简单实现照片墙
Dec 12 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 #HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 #HTML / CSS
利用css3画个同心圆示例代码
Jul 03 #HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 #HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 #HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 #HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 #HTML / CSS
You might like
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python实现剪切功能
2019/01/23 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Python执行时间的几种计算方法
2020/07/31 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
使用索引有什么好处
2016/07/27 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
大学生就业自我鉴定
2013/10/26 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
英文自荐信常用句子
2014/03/26 职场文书
公司联欢会策划方案
2014/05/19 职场文书
最常使用的求职信
2014/05/25 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书