CSS3 transform详解,关于如何使用transform

时间: 2017-11-01阅读: 6866标签: css3

transform是css3的新特性之一。有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用。

transform的作用 

transform可以让元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。  这些属性定义上都从属于transform,因此把它们直接作为transform的value来表达。

transform的兼容写法

当然使用css3的实现一般都不会兼容低版面的IE,这里整理其他浏览器的兼容写法如下:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); 	/* Opera */
}

说明:Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。Opera 只支持 2D 转换。

transform语法

transform: none|transform-functions;

none:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

transform-functions取值:transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素,他有几个属性值参数:rotate;translate;scale;skew;matrix。

transform常用属性

transform:rotate():

旋转; 单位deg,设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

transform:translate():

移动/位移;向右向上为整数,向左向下位移则为负“-”。

translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)。

transform:scale():

比例;比例放大用整数,缩小则为负“-”。

scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。  

scaleX() : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1)。

scaleY() : 使用 [1,sy] 缩放矢量执行缩放操作,sy为所需参数。scaleY表示元素只在Y轴(垂直方向)缩放元素。

transform:skew():

倾斜/扭曲;参数表示倾斜角度,单位deg。

skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);

skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);

skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形);

transform:matrix

矩阵:matrix以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵。这里推荐大家去看

js对transform的取值和赋值

赋值如下:

element.style.webkitTransform = "";
element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

取值通过:

if(element.currentStyle){
	return element.currentStyle['transform'];
}else{
	return getComputedStyle(element,null)['transform'];
}

当然transform的属性还对应3D的,这块平时我们使用的比较少,这里就没做具体的介绍了,大家有详情可以去深入研究。




站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/40

用CSS3实现无限循环的无缝滚动

使在页面中循环展示信息的功能之前一般是用js来实现的,那么用CSS3该如何实现实现呢;使用CSS来进行动画的展示,会让页面显得更加流畅。如果能用CSS实现,可以尝试尽量用CSS实现下

使用CSS3 Cubic-Bezier创建动画链接悬停效果

我们将使用CSS3动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链接上时,会弹出一个小弹出框。我们还将看一下CSS3 Cubic-Bezier(贝塞尔)曲线,它是CSS过渡

css3中计数器的使用

css3里有个很强大的功能,就是计算器,使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。与有序列表相比,突出特性在于可以对任意元素计数,同时实现个性化计数。

利用css3径向渐变做一张优惠券

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过。那么你怎么做呢,切图做背景平铺边缘

CSS3新特性有哪些?

E:nth-child(n) 选择器匹配其父元素的第n个子元素,不论元素类型,n可以使数字,关键字,或公式;E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素

理解 CSS3中 object-fit

在检查网站的时候发现图片给于固定宽的时候,会压缩变形,要保证,img元素不变形,宽高比不变。从别人那里了解到object-fit,以前从未用过,所以就总结给自己看看,理解一下。

CSS3中一些鲜为人知的属性

CSS3是CSS(层叠样式表)技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。这篇文章主要整理一些关于css3中的鲜为人知的属性

css3中样式计算属性calc()的使用和总结

在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。

css3实现背景图片颜色修改的多种方式

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

纯css3实现饼状图

网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!