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 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 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中设置时区,记录日志文件的实现代码
2013/01/07 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
微信小程序云开发详细教程
2019/05/16 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
python实现中文输出的两种方法
2015/05/09 Python
pandas中去除指定字符的实例
2018/05/18 Python
windows下python和pip安装教程
2018/05/25 Python
python实现公司年会抽奖程序
2019/01/22 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python 项目转化为so文件实例
2019/12/23 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
机电专业毕业生推荐信
2013/11/10 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
2014年纪委工作总结
2014/12/05 职场文书
写景作文评语集锦
2014/12/25 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js