Rumah  >  Artikel  >  hujung hadapan web  >  css3 transform属性详解及transform使用总结

css3 transform属性详解及transform使用总结

伊谢尔伦
伊谢尔伦asal
2017-06-07 11:27:433780semak imbas

近年来 HTML5 和 CSS3 发展迅速,国内外不乏一些大站,酷站都在使用最新的技术,各家厂商的浏览器对它们的兼容性越来越好。CSS3中有一个强大的属性 Transform。有了这个特性,各种特效轻松搞定。引用一句歌词“旋转,跳跃,我不停歇”。从字面上就能看出,Transform 是 变型 的意思,他的值主要包括 旋转rotate,扭曲skew,缩放scale,移动translate以及矩阵变形matrix 。下面的内容就来聊聊CSS3中的这个重要的属性。

首先可以学习php中文网相关的免费课程

1. 观看《CSS3 3D 特效视频教程》中 transform属性

CSS3 3D 特效视频教程

2. 学习《CSS3从入门到精通教程》中的 CSS3  transform转换 教程

CSS3从入门到精通教程

transform属性

1. 关于CSS3元素2D平面变换属性transform的实现方法

CSS3的形状变换允许我们对元素拉伸、缩放等等 这篇我主要谈下一2D平面变换 属性transform可以进行变换 transform就是变形的意思 并且它主要通过函数来使用,有以下函数translate() 平移变换ratate() 旋转变换scale() 缩放变换skew() 倾斜变换matrix() 矩阵变换transform-origin则时定义变换的中心平移变换

2. css3中关于transform属性实现div不定宽高垂直水平居中的详细介绍

transform的兼容性还是比较乐观的。IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换。

谷歌和Safari支持代替的-webkit-transform属性。IE9以上、火狐和欧朋是兼容的。

想必大家在实际项目中肯定会遇见p不定宽和高垂直水平居中的问题。记得以前都是用js去实现。

其实用css来实现也有好几种方法。但是个人觉得还是用transform来实现更简单和方便就是不兼容IE9以下浏览器。

3. CSS3中transform、transition和animationsan三种属性的区别实例详解

在部分的test case当中,每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,对于做设计的人来说并不是很陌生,简单的来说就是css 的图形变形工具。

4. css变形transform属性详细介绍

transform:变形

旋转:rotate():度数

斜切:skew():度数

skewX

skewY  

缩放:scale():正数、负数、小数

scaleX

scaleY

位移:translate():css支持的单位都可以

translateX

translateY  

transform的执行顺序:后写的先执行

transform: scale(2) rotate(50deg); 先执行旋转,在执行缩放 

5. CSS中transform 属性

CSS中transform 属性允许你修改CSS可视化模型的坐标空间。通过transform,可以让元素进行移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。

如果该属性有一个非none值, 将会产生一个层叠上下文. 在这种情况下 对象将作为它包含的 position: fixed 元素的包含块(a containing block)。

6. CSS3 transform 对HTML文档流带来的影响

body(或html) 加了 transform 属性以后,整个 body DOM 既会产生相应的变换,但此时的“整个”仅是指 body 下标准文档流元素,对于那些 position: absolute; / position: fixed; 元素,因为已经脱离了 body 所属的文档流,所以无法凭借 body 的变换使自己也自然的达到相应的变换效果。

相关问答

1. transform 制作滚动效果为什么需要两个元素

2. transition transform初始display:block怎么就没移动效果?

3. CSS3 transform 怎样才能中心旋转?

【相关推荐】

1. php中文网免费视频教程:《php.cn独孤九贱(2)-css视频教程》

2. php中文网免费视频教程:css3实现网页平滑过渡效果视频教程

Atas ialah kandungan terperinci css3 transform属性详解及transform使用总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:CSS让DIV重叠实例总结Artikel seterusnya:DIV CSS规范命名总结