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 相关文章推荐
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
利用php生成验证码
2017/02/23 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
脚本收藏iframe
2006/07/21 Javascript
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
Django中间件实现拦截器的方法
2018/06/01 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
餐饮加盟计划书
2014/01/10 职场文书
促销活动方案模板
2014/02/24 职场文书
网络管理员岗位职责
2014/03/17 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
检讨书格式
2015/01/23 职场文书
村主任当选感言
2015/08/01 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
pandas中关于apply+lambda的应用
2022/02/28 Python