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样式无效的十个重要原因详解
Aug 10 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php删除数组元素示例分享
2014/02/17 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python实现字符串加密成纯数字
2019/03/19 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
基于树莓派的语音对话机器人
2019/06/17 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
精彩的推荐信范文
2013/11/26 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
小学庆六一活动方案
2014/02/28 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
大学生在校表现评语
2014/12/31 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
高二语文教学反思
2016/02/16 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS