html transform属性,css3 transform属性详解

CSS3变形是一些效果的集合，比如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。

CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。

translate()函数接受CSS的标准度量单位；scale()函数接受一个0和1之间的十进制值；rotate()和skew()两个函数都接受一个径向的度量单位值deg。除了rotate()函数之外，每个函数都接受X轴和Y轴的参数。

CSS3变形中具有X /Y可用的函数：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。(translateX(正的向右)，translateY(负的向上))

2D transform常用的transform-function的功能:

translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。

scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。

rotate()：用来旋转元素。

skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。

matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。

3D transform常用的transform-function的功能:

translate3d()：移元素元素，用来指定一个3D变形移动位移量

translate()：指定3Ｄ位移在Ｚ轴的位移量。

scale3d()：用来缩放一个元素。

scaleZ():指定Z轴的缩放向量。

rotate3d()：指定元素具有一个三维旋转的角度。

rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。

perspective()：指定一个透视投影矩阵。

matrix3d()：定义矩阵变形。

设置transform-style的值为preserve-3d值，建立一个3D渲染环境。

transform-origin属性指定元素的中心点在哪。transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

`perspective`属性：设置元素被查看位置的视图。 perspective 属性定义 3D 元素距

视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

`perspective-origin：` 设置 3D 元素的基点位置。属性定义 3D 元素所基于的 X 轴

和 Y 轴。该属性允许您改变 3D 元素的底部位置。

Perspective：景深

perspective-origin ：景深基点

transform-origin：变换基点

注意：和transform属性易混淆的是transition过渡属性(不是translate()移动变化哦)。

看下面一个例子：

复制代码代码如下:

.animation{

transform:rotate(20deg) scaleX(1.7) scaleY(-0.7) translateX(132px)

translateY(21px) skewX(-26deg) skewY(5deg);

}

Transform变化

html transform属性,css3 transform属性详解相关推荐

CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
html跨行使用的属性,HTML表格标记详解4：TD参数中设定跨列跨行属性
this.p={ m:2, b:2, loftPermalink:'', id:'fks_083074083081084075085087087095083084084067083083082065' ...
html标签的下一级遍历,jquery属性,遍历,HTML操作方法详解
Jquery属性遍历.HTML操作. Jquery拥有可操作HTML元素和属性的强大方法. 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中. .andSelf() ...
Android 系统属性读取和设置详解
Android 系统属性读取和设置详解一.在adb中进行属性读取和设置 1.Settings Provider设置和读取获取设置 2.SystemProperties属性读取和设置二.Andr ...
php开源混合模式吗,CSS3混合模式使用详解
这次给大家带来CSS3混合模式使用详解,使用CSS3混合模式的注意事项有哪些,下面就是实战案例,一起来看一下. 一.关于混合模式熟悉PS的人都应该知道混合模式: SVG以及Canvas中也有混合模式 ...
CSS3动画特效详解
大家都知道网页的3大组成部分,分别是结构,表现和行为.就像我们要盖一座房子,要地基要打的扎实,房子的架构要稳固,而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风 ...
CSS3新特性详解(二)：CSS3 字体@font-face详解、如何创建和修改woff字体文件及text-shadow等文本效果
关于CSS3新特性,在上篇博文中"CSS3新特性详解(一):CSS3选择器.边框.背景使用细节及案例演示",讨论了CSS3选择器.边框和背景,本文讨论字体@font-face使 ...
视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解
css中属性选择器我感觉与css2有比较大的区别了,下面我整理了一些关于css3选择器的使用例子,希望对各位会带来帮助. 注释: 一.属性选择器除了IE6不支持外,其他的浏览器都能支持. 二.E[at ...
View Transform（视图变换）详解
http://www.cnblogs.com/graphics/archive/2012/07/12/2476413.html 什么是View Transform 我们可以用照相机的原理来阐释3D图形 ...

html transform属性,css3 transform属性详解

html transform属性,css3 transform属性详解相关推荐

最新文章

热门文章