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. 一篇文章让你读懂iOS和Android的历史起源

    智能手机虽说是移动电话,但我们完全可以将其作为小型化的电脑来思考.这样一来也能够显示出智能手机OS的高性能.我们首先一起来回顾下智能手机OS的历史. OS的黎明期 其实在很早之前就已经有这样的想法,即 ...

  2. Swift Defer 延迟调用

    1.Defer 在一些语言中,有 try/finally 这样的控制语句,比如 Java.这种语句可以让我们在 finally 代码块中执行必须要执行的代码,不管之前怎样的兴风作浪.在 Swift 2 ...

  3. Effective Java 第三版——54. 返回空的数组或集合不要返回null

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  4. 物联网架构成长之路(23)-Docker练习之Elasticsearch服务搭建

    0. 前言 最近基本都是学一些环境配置,和一些中间件的安装与配置.没有实际编写代码.可能看起来有点水,我对自己的学习方式是,先要了解各个中间件的安装配置以及简单使用,理论应用场景,然后我在小项目中,逐 ...

  5. ceph 的 bufferlist

    bufferlist是buffer::list的别名,其由来在 http://bean-li.github.io/bufferlist-in-ceph/ 中有非常详细的介绍 其p.p_off.off字 ...

  6. 【MQTT】Mosquitto的安装与使用流水记

    最近使用MQTT,安装Mosquitto试一下,并记录下来. 软件准备 从官网获取安装包: wget http://mosquitto.org/files/source/mosquitto-1.4.1 ...

  7. python学习笔记（23）——python压缩bin包

    说明(2017-12-25 10:43:20): 1. CZ写的压缩bin包代码,记下来以后好抄. # coding:utf-8 ''' Created on 2014年8月14日 @author: ...

  8. 业界常用的和不常用cad快捷键

    AutoCAD 是目前世界各国工程设计人员的首选设计软件,简便易学.精确无误是AutoCAD成功的两个重要原因.AutoCAD提供的命令有很多,绘图时最常用的命令只有其中的百分之二十. 在CAD软件操 ...

  9. js中如何把字符串转化为对象、数组示例代码

    很明显是一个对象,但如何把文本转为对象呢.使用eval();注意一定要加括号,否则会转换失败 把文本转化为对象 var test='{ colkey: "col", colsinf ...

  10. unable to locate package gparted

    在unbuntu安装gparted的时候出现这个错误提示,意思为:找不到这个安装包 可能的原因: 1.当前系统更新包没有更新,执行命令:sudo apt-get update 2.命令错误,重新检查需 ...