css3transform属性详解及transform使用总结

2020-11-27 来源：飒榕旅游知识分享网

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

首先可以学习Gxl网相关的免费课程

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 的变换使自己也自然的达到相应的变换效果。

全部栏目

css3transform属性详解及transform使用总结