原文地址:http://missdora.net/blog/2010-05/css3-transform
transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现
有五种变形样式,可以重叠多种变形样式,以空格分隔
- scale:缩放,1为原始大小。scale(x)。正数放大,负数缩小。属性值为一个时,x/y轴同时缩放;属性值为两个值时,分别控制x、y轴的缩放。
- rotate:水平旋转,属性值格式为Xdeg。rotate(Xdeg)。X为正数时,顺时针旋转;为负数时,逆时针旋转
- translate:定位元素,基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时,x、y轴参数相同;为两个时,x、y轴分别定位
- skew:将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述,想象一下平行四边形吧。属性值为一个时,x、y轴参数相同;为两个时,x、y轴各自倾斜。
- matrix:矩阵,六个值。矩阵变形(学习完毕之后更新)
浏览器支持情况:-webkit-transform,-moz-transform,-o-transform,目前对CSS3动画支持的最好最全面的是webkit内核浏览器。
在设置了transform属性后,可以设置transform-origin属性,这个属性控制变形时的源点,也就是变形时围绕的点。这个属性接受两个参数,可以是百分比、top/center/bottom、带单位的数值。
示例1:scale
scale, hover me
.scale{height:50px;width:100px;background:red;-webkit-transition:all .5s ease;}
.scale:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);}
scale with origin, hover me
.scale:hover{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);}
.origin{-webkit-transform-origin:top center;}
/*设定了变换源点,下面几个例子中也有设定了变幻源点后的示例*/
示例2:rotate
rotate, hover me
.rotate:hover{
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);}
rotate with origin, hover me
示例3:translate
translate, hover me
.translate:hover{
-webkit-transform:translate(10px,-10px);
-moz-transform:translate(10px,-10px);
-o-transform:translate(10px,-10px);}
translate with origin, hover me
示例4:skew
skew, hover me
.skew:hover{
-webkit-transform:skew(20deg,-10deg);
-moz-transform:skew(20deg,-10deg);
-o-transform:skew(20deg,-10deg);}
skew with origin, hover me
示例5:matrix
matrix, hover me
.matrix:hover{
-webkit-transform:matrix(1, -0.2, 0, 1, 0, 0);
-moz-transform:matrix(1, -0.2, 0, 1, 0, 0);
-o-transform:matrix(1, -0.2, 0, 1, 0, 0);}
分享到:
相关推荐
纯css3 transform文字变形3D阴影效果代码 纯css3 transform文字变形3D阴影效果代码
css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码 css3属性transform制作圆盘导航菜单代码
纯css3绘制的变形金刚logo图标样式效果源码.zip
CSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 3D transform变换,不过如此!.mhtmlCSS3 ...
div css3 transform旋转变形属性制作新浪微博图片抖动
代码简介:可调节CSS3变形金刚特效是一款可以放大缩小,可以旋转,可以调节透明度,可以调节像素等等。
css3 transform 3D 图片旋转木马
div css3 hover transform属性5种鼠标悬停 div css3 hover transform属性5种鼠标悬停
利用transform属性写的圆盘导航
css3 animation transform鱼游动特效</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, ...
CSS Code复制内容到剪贴板 transform-style: flat | preserve-3d 其中flat值为默认值,表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。 也就是说,如果对一个元素设置了transform-...
实现针对于Webkit(Google Chrome,Safari)、Moz(Firefox)以及Opera浏览器的一些变换效果,包括旋转、倾斜、缩放、位移效果。
3D-css-transform.zip,css转换操场。可视化二维和三维css3转换功能的在线工具。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面,用于视频游戏,3D打印和VR,以及其他应用程序。
10种纯CSS3 transform鼠标悬停到图片上过渡动画显示 10种纯CSS3 transform鼠标悬停到图片上过渡动画显示
CSS3变形金刚霸天虎图标特效是一款纯CSS3实现的带有动画效果的变形金刚霸天虎图标动画特效。
CSS变形金刚蜘蛛侠LOGO代码基于angular.min.js制作,支持放大缩小,拖动旋转,拖动透明度,拖动左右移,拖动上下移等功能。
利用css3 transform属性制作的14种不同效果的侧边栏导航的隐藏和显示动画效果。该侧边栏导航可用于移动设备等小屏幕设备,效果极赞。
纯css3 transform制作带指针偏移Safari指南针动