CSS3 transform 属性

语法：

transform: none|transform-functions;
值 描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

eg：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>例子</title>

<style>

div

{

width:200px;

height:100px;

background-color:yellow;

/* Rotate div */

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-webkit-transform:rotate(7deg); /* Safari and Chrome */

}

</style>

</head>

<body>

<div>Hello</div>

</body>

</html>

CSS3 transform 属性的更多相关文章

  1. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  2. css3 transform属性多值的顺序问题

    对于transform属性的多值的顺序问题,我自己就被困扰过.后来知道了跟顺序有关,但是不知道为什么.我想应该很多人跟我以前一样,知其然不知其所以然.如果不知道的,也许这篇文章会对大家有所帮助. 先来 ...

  3. CSS3 transform属性

    说明: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行移动(translate).旋转(rotate).缩放(scale)或倾斜(skew) transition属 ...

  4. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

  5. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  6. 商品标签例子——CSS3 transform 属性

    积累很重要.从此开始记录前端生涯的点滴.... <!DOCTYPE html><html lang="en"><head> <meta c ...

  7. CSS3 transform 属性 旋转 div 元素

    div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...

  8. 自己做得一个用于直观观察css3 transform属性中的rotate 3D效果

    这段代码还是非常简单,是看了一个老师的视频受的启发,也是调用了很多个函数,所以比较杂乱吧! <!DOCTYPE html><html lang="en">& ...

  9. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

随机推荐

  1. 【Android】解析Paint类中MaskFilter的使用

    目录结构: contents structure [+] EmbossMaskFilter BlurMaskFilter MaskFilter可以用来指定画笔的边缘效果.如果引用开启硬件加速的话,那么 ...

  2. Android 手动调用 返回键

    有人想通过下面代码来实现手动调用返回键,很可惜会出现空指针异常. this.onKeyDown(KeyEvent.KEYCODE_BACK, null); 我们可以通过调用 onBackPressed ...

  3. 2013-2015 Aaronyang的又一总结，牧童遥指纳尼村

    我没有时间去唠叨自己的事,可是你们是我喜欢的人,ay很愿意写给你们分享:去年的万人阅读的总结链接:<没学历的IT人生没那么悲催,献给程序员们> 提前声明:本文不良反应:请自备垃圾桶,准备装 ...

  4. 2.翻译系列:为EF Code-First设置开发环境(EF 6 Code-First系列)

    原文链接:http://www.entityframeworktutorial.net/code-first/setup-entity-framework-code-first-environment ...

  5. VisualVM、JConsole

    VisualVM.JConsole 需要熟悉JVM内存模型 https://blog.csdn.net/libaolin198706231987/article/details/55057149 ht ...

  6. javascript es6 箭头函数

    1.箭头函数示例 let add = (a,b) => a + b         //没有语句块时,默认作为返回值 add(1,2); var multi = (a,b) => {ret ...

  7. hbase源码系列（十五）终结篇&Scan续集-->如何查询出来下一个KeyValue

    这是这个系列的最后一篇了,实在没精力写了,本来还想写一下hbck的,这个东西很常用,当hbase的Meta表出现错误的时候,它能够帮助我们进行修复,无奈看到3000多行的代码时,退却了,原谅我这点自私 ...

  8. Android控件源码分析--AndroidResideMenu菜单

    说明 早上看到一篇文章介绍了ResideMenu得使用,这是一个类似SlidingMenu的控件,感觉有点高尚大,反正我之前没见过,本着凑热闹的好奇心,立马clone把玩下,项目地址奉上: https ...

  9. CentOS下安装Vmtools

    基本步骤差不多 [root@rd01 ~]# cd /media [root@rd01 ~]# ls -a [root@rd01 ~]# cp VMwareTools-5.5.1-19175.tar. ...

  10. Linux目录详细说明大全（推荐）

    Linux目录详细说明大全,方便你以后合理规划及管理 "/" : 根目录Linux文件系统的入口.也是最高级,最重要的的目录.除衍生出其它目录,还和系统的开机,还原,系统修复有的, ...