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

时间: 2017-11-01阅读: 6737标签: 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中 object-fit

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

css3增加的的属性值position:stricky

position:sticky,这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。position:sticky 的生效是有一定的限制的

css3渐进增强 VS 优雅降级

进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。

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

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

css3新特性总结

css3新特性总结:圆角边框、多背景图、颜色和透明度(由原来的rgb到现在的rgba)、多列布局和弹性盒模型、盒子的变幻(2D、3D)、过渡和动画、引入web字体(在服务器端存储)、媒体查询、阴影

css3中计数器的使用

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

CSS3新特性有哪些?

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

CSS3中一些鲜为人知的属性

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

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

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

css3动画讲解,关于css3的@keyframes和animation

通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。

点击更多...

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