transform旋转变换效果
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
语法: 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 转换元素定义透视视图。 测试
transform旋转变换效果的更多相关文章
- transform动画效果
transform动画效果 transform :移动,旋转.倾斜.缩放. transform:translate(0,300px); x代表的是水平的偏移距离,y代表垂直的. t ...
- css3 transform动画效果与公司框架简易动画的差异
先看一下该网站的效果 http://2014guangzhouchezhan.dongfeng-citroen.com.cn/mobile/ 该站里面的动画效果由简易动画与css3动画2种方式混合达到 ...
- transform 动画效果
http://www.css88.com/tool/css3Preview/Transform.html transform的含义是:改变,使…变形:转换 transform的属性包括:rotate( ...
- 携程transform放大效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- NGUI Tween动画Scale与Transform冲突
NGUI中我们要同时完成Scale与Transform的效果,会发现动画并不是同我们想的那样运行的. 原因就是Tween Scale与Tween Transform的冲突调用. Tween Scale ...
- Canvas transform浅析
没有前奏,直接进入主题 transform调用方法: ctx.transform(a,b,c,d,e,f);如下 var ctx = document.getElementById("myC ...
- transform的2D部分,嗯…就这个标题了。
上一次写了transition的内容,这次就写拼写很类似的另外一个属性transform好了……我英语差这件事就不要吐槽了,下面是正文,真的: transition是过渡,transform是变换. ...
- Silverlight 中MatrixTransform和其他Transform的数值转换
对各种transform的讲解已经很多了,但是有时MatrixTransform和其他transform变换效果之间需要转换时,变换量的转换又如何呢?下面的类就完成了Matrix和其他transfor ...
随机推荐
- 将图片流输出到界面mvc
System.Drawing.Image _CodeImage = _Code39.GetCodeImage(OrderNo, Code39.Code39Model.Code39Normal, tru ...
- Android-自定义开关
效果图: 需要两张图片,一张图片为背景,一张图片为滑动的点 布局去指定一个自定义View对象: view.custom.shangguigucustomview.MyCustomSwitch < ...
- [记]Centos下流量统计使用记录
因为最近要进行centos流量统计,需求是想针对tomcat进行针对性的上下行流量时段统计及汇总,找了很多资料及命令,要么是可以针对进程的但是没有汇总,要么是有汇总但是不针对进程. 所以只能混合几个命 ...
- typescript 自动编译 生成js文件
项目文件 <?xml version="1.0" encoding="utf-8"?><Project ToolsVersion=" ...
- solr特点二:Facet(1)
一. Facet 简介 Facet 是 solr 的高级搜索功能之一 , 可以给用户提供更友好的搜索体验 . 在搜索关键字的同时 , 能够按照 Facet 的字段进行分组并统计 . 二. Fa ...
- SQL datediff()函数 时间差
定义和用法 DATEDIFF() 函数返回两个日期之间的天数. 语法 DATEDIFF(datepart,startdate,enddate) startdate 和 enddate 参数是合法的日期 ...
- easyui的filebox过滤文件
示例:<input class="easyui-filebox" data-options="buttonText:'选择文件',accept:'image/gif ...
- ie11下ajax用escape发送中文参数失败
一个项目中,登录请求是ajax,get模式.登录名无中文可以正常登录:登录名是中文则偶尔可以登录,大部分情况下无法登录,ajax请求无法发送成功. 登录名是用js的escape函数转码. 经过多次测试 ...
- 自己从0开始学习Unity的笔记 II (C#条件语句基础练习)
首先,自己用了下三目表达式,来做了一个闰年的判断,也就是能被400整除,或者是能够被4整除,但是不能被100整除的年份. int year; //输入的年 bool fourHunderd; //能被 ...
- dynamic的一些使用心得
dynamic关键字才出来的时候,觉得真是没什么用,谁总是和com交互来交互去啊,唯恐避之不及啊. 后来逐渐算是有了一些使用心得,发现这货还真是犀利啊,故在此举几个例子,起抛砖引玉之用. 1.替代XX ...