CSS3 transform 属性
CSS3 transform 属性
语法：
| 值 | 描述 |
|---|---|
| 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 属性的更多相关文章
- 【CSS3 transform属性和过渡属性详解】
CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...
- css3 transform属性多值的顺序问题
对于transform属性的多值的顺序问题,我自己就被困扰过.后来知道了跟顺序有关,但是不知道为什么.我想应该很多人跟我以前一样,知其然不知其所以然.如果不知道的,也许这篇文章会对大家有所帮助. 先来 ...
- CSS3 transform属性
说明: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行移动(translate).旋转(rotate).缩放(scale)或倾斜(skew) transition属 ...
- CSS3 transform 属性(2D,3D旋转)
一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...
- CSS3 transform 属性详解(skew, rotate, translate, scale)
写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...
- 商品标签例子——CSS3 transform 属性
积累很重要.从此开始记录前端生涯的点滴.... <!DOCTYPE html><html lang="en"><head> <meta c ...
- CSS3 transform 属性 旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
- 自己做得一个用于直观观察css3 transform属性中的rotate 3D效果
这段代码还是非常简单,是看了一个老师的视频受的启发,也是调用了很多个函数,所以比较杂乱吧! <!DOCTYPE html><html lang="en">& ...
- CSS3 transform rotate（旋转）锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
随机推荐
- Android Data Recovery for Mac（安卓数据恢复软件）破解版安装
1.软件简介 Android Data Recovery 是 macOS 系统上一款 Android 设备数据恢复软件,能够帮助我们在 mac 电脑上对 Android 设备进行数据恢复,文档. ...
- Redis资料整理
1.Redis命令參考中文简体版. 2.java操作redis.jedis使用api 3.Redis学习笔记. 4.浅谈Redis数据库的键值设计 5.Redis资料汇总专题 6.MongoDB资料汇 ...
- Atitit 技术经理职责与流程表总结
Atitit 技术经理职责与流程表总结 1. (最重要) 理念 价值观建设 ***团队文化建设2 1.1. 加强跨项目组员沟通 ,防止重复劳动2 1.2. 活动聚餐2 2. (重要)方向建设 技术 ...
- Fluent动网格【3】：DEFINE_CG_MOTION宏
除了利用Profile进行运动指定之外,Fluent中还可以使用UDF宏来指定部件的运动.其中用于运动指定的宏主要有三个: DEFINE_CG_MOTION DEFINE_GEOM DEFINE_GR ...
- 【Java】加载驱动方法
1.Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver"); 2. DriverManager.register ...
- Oracle---常用SQL语法和数据对象
1.INSERT (往数据表里插入记录的语句) INSERT INTO 表名(字段名1, 字段名2, ……) VALUES ( 值1, 值2, ……); INSERT INTO 表名(字段名1, 字 ...
- idea配置项目运行时内存大小
选择 edit Configurations : -server -XX:PermSize=1024M -XX:MaxPermSize=2048M
- Git 重命名操作
截至目前,Tome 和Jerry 都使用手动命令来编译自己的项目.Jerry 决定为他们的项目创建 Makefile,并给予适当的名称来命名“string.c” 文件. [jerry@CentOS p ...
- ssh免密码登录配置方法
每次输密码很麻烦,免密登录设置方法按照<ssh免密码登录配置方法>即可,简单来说: 1.终端上执行ssh-keygen -t rsa,生成密钥对(存放在/home/usera/.ssh). ...
- DedeCMS中channelartlist自增参数global.itemindex
在 dede:channelartlist 标签下,使用: {dede:global.itemindex runphp='yes'} {/dede:global.itemindex} dede:cha ...