文档章节

CSS之Transform

我是偶哦
 我是偶哦
发布于 2016/05/28 10:46
字数 984
阅读 47
收藏 2

我们利用css3中的transform可以实现文字或图像的旋转、缩放、倾斜和移动四种类型的变形处理。

本文使用的是标准的transform,亦可以使用各个浏览器对应私有的属性。对应如下

  • -webkit-transform
  • -moz-transform
  • -o-transform

不过在我的电脑上用transform效果相同,Chrome 49  Firefox 46 IE 10

一、旋转(rotate)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式如下:

    rotate(angle)

旋转角度单位有:

  •  deg    指角度制,一周的角度是360°,直角是90°
  •  grad   指百分度制,一周的角度是400,直角是100
  •  turn     圈, 1turn代表旋转一圈
  •  rad     指弧度制,一周的角度是2π,直角是π/2   

转换比例为: 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

二、缩放(scale)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: scale(1,-1)
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式如下:

    scale(number,[number2])

number2是可选的,如果未设置,则与默认与number相同。number可以为正数、负数、小数。

我们将number分为两部分,正负号(+,-)和数值(number的绝对值)。负号(-)意味着元素要被旋转180度,数值部分大于1则放大,小于一则缩小,等于一既不放大又不缩小,为零时消失。

三、移动(translate)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: translate(2in,5cm)
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式如下:

    translate(value1,[value2])

第一个参数表示相对于原位置X轴偏移距离,第二个参数表示相对于Y轴偏移个距离,如果省略了第二个参数,则默认为0。正数向右和下偏移,负数向左和上偏移。

距离的单位有:

  • 绝对长度单位
    • px   
    • in     
    • cm   
    • mm  
  • 相对字体长度单位
    • em
    • rem
    • pt
    • pc
    • ex
    • ch
  • 可视区百分比长度单位
    • vw
    • vh
    • vmin
    • vmax
  • 离奇的长度单位
    • %(百分比)

关于这些长度单位,这有一篇很好的介绍链接http://www.w3cplus.com/css/the-lengths-of-css.html,本段也是参照此链接,不过提示大家,浏览器的版本也在不断的迭代,有些特性需要自己去验证,比如vmax属性在我的chrome浏览器下也行正常运行。

四、倾斜(skew)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: skew(30deg,-0.1turn)
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式:

    skew(angle,[angle])

第一个参数表示相对于X轴进行倾斜,第二个参数相对于Y轴进行倾斜,如果省略了第二个参数,则默认为0。

rotate函数只是旋转,不改变元素的形状,但skew函数会改变元素的形状。

五、变形

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            transform: matrix(1,0.4,0,1,0,0)
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

matrix()函数是一个3x3的矩阵,将旧的参数转换成新的参数。

目前,我对此也不是很了解,大家如有兴趣自行Google。

六、Transform-origin

CSS变形的原点默认是对象的中心点,如果要改变这个中心点,可以使用transform-origin属性进行定义。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img:hover{
            /*以左上角为原点旋转*/
            transform-origin: top left;
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
    <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download">
</body>
</html>

语法格式:

    transform-origin:[ [ <percentage> | <length> | left | center | right ][ <percentage> | <length> | top | center | buttom ] ? ] | [ [ left | center | right ] || [ top | center | bottom ]]

transform-origin属性的初始值是50%,50%,使用与块状元素和内联元素。transform-origin接受连个参数,他们可以是百分比、em、px等具体值也可以是left、center、right,或者top、middle、bottom等描述性关键字。

 

© 著作权归作者所有

我是偶哦
粉丝 6
博文 32
码字总数 21607
作品 0
深圳
私信 提问
用css实现图片的旋转

oushitian
2014/07/04
0
0
CSS3详解:transform

近来,HTML5和CSS3的发展速度还是很可观的,国内外不乏一些大站,酷站都在使用最新的技术。面对新的技术,我们该如何正确的把握和使用到今后的项目实战中呢?针对这一问题,浩子决定剖析CSS...

gutaotao1989
2017/08/24
0
0
CSS3变形详情介绍

WEB设计师借助CSS3可以轻松实现倾斜,缩放,移动及翻转元素 1.变形简介 CSS3变形时一些效果的集合,比如平移、旋转以及缩放效果,每个效果都称为变形函数(Transform Function),在CSS没有变...

TyrionJ的博客
2017/12/18
0
0
网页从右至左滑出效果

本质上是一个独立层(DIV或SECTION等),初始向右对齐,宽度为0,完全打开时变为100%。因此需要定义两个css类。 (初始)关闭状态: 开启状态: 因此打开浮动页面的方法是: 关闭的方法则是:...

一点灵犀
2016/07/12
90
0
Js实现手机端红包雨效果

演示下载地址:http://www.erdangjiade.com/js/1105.html $(document).ready(function() { var win = (parseInt($(".couten").css("width"))) - 60; $(".mo").css("height", $(document).hei......

2当家的
2017/02/08
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

javaagent使用demo详解

javaagent又称java探针,结合javassist或asm等框架对字节码文件进行操作,从而更优雅的实现“AOP”等功能,减少对原代码的侵入性等。从而我们可以借此来实现微服务等的全链路追踪以及项目环境...

xiaomin0322
12分钟前
2
0
jar包是怎么提交到Spark上运行的

我们都知道,写好spark程序后,可以通过命令行spark-submit方式提交到集群,那么这个具体的过程是怎么搞得呢? spark有多种集群方式,如yarn,standalone等。提交方式又分为client和cluster...

守望者之父
26分钟前
3
0
最好的重试是指数后退和抖动

1. 概述 在本教程中,我们将探讨如何使用两种不同的策略改进客户端重试:指数后退和抖动。 2. 重试 在分布式系统中,多个组件之间的网络通信随时可能发生故障。 客户端应用程序通过实现重试来...

liululee
37分钟前
5
0
聊一聊大厂内部的安全管理机制

工作了两个月了体会到了很多之前做外包小项目没有的东西,不得不说大厂的还是有自己一套的完善的体制,不会像B站那样泄露自己整个后台的源码这种事情发生。 电脑办公 比如说在使用电脑办公这...

gzc426
今天
6
0
如何利用deeplearning4j中datavec对图像进行处理

NativeImageLoader Labelloader = new NativeImageLoader(112, 112, 3,new FlipImageTransform(-1)); 一、导读 众所周知图像是有红绿蓝三种颜色堆叠而成,利用deeplearning对图像处理,必须把...

冷血狂魔
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部