css3学习之2D转换功能详解


Posted in HTML / CSS onDecember 23, 2016

前言

CSS3提供了2D转换功能,能够对元素进行移动、缩放和转动等功能。

2D转换的属性名为transform,使用方法为transform:method(value)。

2D转换方法有translate、scale、rotate、skew、matrix,还有基于这些分支出的translateX、scaleY等。

这里,我将会介绍到以下转换方法:

  1. translate()
  2. rotate()
  3. scale()
  4. skew() 

首先,我们先插入一个简单的html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css3的2D转换</title>
    <style type="text/css">
 
 
        *{
            margin:0;
            padding:0;
        }
 
        #picture{
            width:100%;
            height:500px;
            background:#ccc;
        }
 
        img{
            margin:100px 0 0 100px;
        }
 
 
    </style>
</head>
<body>
 
    <div id="picture">       
            <img src="mary.gif" alt="This is a picture" >
    </div>
     
</body>
</html>

这段代码我们可以实现在一个div里放一张图片,通过这张图片以便于向大家介绍以下方法。

1.translate()方法:这个方法里可以有两个参数,中间用分号隔开,分别表示沿着X轴和Y轴移动的距离,这个距离是相对于该图片的移动距离,且向右为X轴的正方向,向下为Y轴的正方向。下面的代码表示将图片向右移动100px,向下也移动100。

img{
    margin:100px 0 0 100px;
        transform:translate(100px,100px); 
}

2.rotate()方法:这个方法里有一个参数,表示要旋转的度数,正数表示顺时针旋转,那么负数就表示逆时针旋转了。在要旋转的度数后面添加deg (即degree,度数的意思)。以下代码表示将图片顺时针旋转50°。

img{
    margin:100px 0 0 100px;
        transform:rotate(50deg);
}

3.scale()方法:这个方法里有两个参数,没有单位。分别表示宽度和高度放大或缩小的倍数,如果大于1表示放大;如果小于一表示缩小。以下代码表示将图片的宽度和高度都放大两倍。

img{
    margin:100px 0 0 100px;
        transform:scale(2,2);
}

4.skew()方法:有两个参数,分别表示沿着X轴和Y轴倾斜转换,单位同样是deg,表示角度。这个方法不是很容易理解。首先给出下列代码:

img{
    margin:100px 0 0 100px;
    transform:skew(20deg,0deg);
}

表示将图片沿着x轴逆时针旋转20度。

css3学习之2D转换功能详解

这是没有使用skew()方法的样子

css3学习之2D转换功能详解

这是使用了skew()方法之后的样子。

为什么呢?这是因为其x轴和Y轴的方向是这样的:

css3学习之2D转换功能详解

当x轴旋转20°时会将图片进行逆时针旋转,但是请注意:这里不是真正意义上的旋转,而有拉伸倾斜的意思,旋转之后,它的宽度并没有改变,并且做一条垂线可以发现高也是没有改变的。

对于Y轴方向的旋转是一样的:

img{
    margin:100px 0 0 100px;
    transform:skew(0deg,20deg);
}

上面的代码表示将图片沿着Y轴方向旋转了20°。

旋转之后,就是下面这样了:它是沿着顺时针方向旋转的。

css3学习之2D转换功能详解

如果,我们对x和y轴都旋转呢?

img{
    margin:100px 0 0 100px;
    transform:skew(20deg,20deg);
}

那么最终就是综合作用的效果了,如下图所示:

css3学习之2D转换功能详解

说了这么多,大家有没有发现我们每次偏移,旋转,倾斜,放大和缩小是相对于哪个点呢?

如果你稍微细心的话,就会发现是相对于中心点。这里就要用到tansform-origin属性了。

即通过这个属性,我们可以规定这些方法通过哪一个点作为原点。

首先举几个例子。

transform-origin:0 0;表示以左上角为原点。

transform-origin:100% 0;表示以右上角为原点

transform-origin:0 100%;表示以左下角为原点

transform-origin:100% 100%;表示以右下角为原点

于是我们可以得知,这些值的设定是以左上角为基点的,向右为x轴的正方向,向下为y轴的正方向。如果不设定这个属性,那么默认值为

transform-origin:50% 50%;即以中心作为变换的基点。

最后我还要说一下浏览器兼容的问题,为了使代码能在各个浏览器运行成功,我们需要在层叠样式表中多加几行代码,比如说rotate()方法:

transform: rotate(30deg);
-ms-transform: rotate(30deg);       /* IE 9 */
-webkit-transform: rotate(30deg);   /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);  /* Firefox */

这样,我们就可以在各个主要浏览器流畅运行了!

总结

以上就是这篇文章的全部内容了,希望本文的内容对各位学习或者使用CSS3能带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 #HTML / CSS
学做Bootstrap的第一个页面
May 15 #HTML / CSS
css3实现背景模糊的三种方式
HTML5如何适配 iPhone IOS 底部黑条
CSS3画一个阴阳八卦图
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
a标签的css样式四个状态
Mar 09 #HTML / CSS
You might like
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
Jquery 动态生成表格示例代码
2013/12/24 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
Python psutil模块简单使用实例
2015/04/28 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
小区门卫值班制度
2014/01/24 职场文书
咖啡店创业计划书
2014/08/15 职场文书
中学教师个人总结
2015/02/10 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android