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 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
用cookies来跟踪识别用户
2006/10/09 PHP
组合算法的PHP解答方法
2012/02/04 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
Python FTP操作类代码分享
2014/05/13 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python输出各行命令详解
2018/02/01 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
如何进行有效的自我评价
2013/09/27 职场文书
食品工程专业求职信
2014/06/15 职场文书
上诉状格式
2015/05/23 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
python编写五子棋游戏
2021/05/25 Python