CSS3--transform
transform:向元素应用2D或3D转换,该属性允许我们对属性旋转,缩放,移动,或倾斜。
transfrom:none;定义不进行转换
transfrom:matrix(n,n,n,n,n,n);定义2D转换,使用六个值的规阵
transfrom3d:matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n);定义3D转换,使用十六个值的4*4规阵
transfrom:translate(x,y);定义2D转换。
transfrom:translate3d(x,y,z);定义3D转换
transfrom:translateX(x);定义转换,只是用X轴的值
transfrom:translateY(y);定义转换,只是用Y轴的值
transfrom:translateZ(z);定义3D转换,只是用Z轴的值
scale(x,y);定义2D缩放转换
scale3d(x,y);定义3D缩放转换
scaleX(x);通过设置X轴的值来定义缩放转换
scaleY(y);通过设置Y轴的值来定义缩放转换
scaleZ(z);通过设置z轴的值来定义3d缩放转换
rotate(angle);定义2D旋转,在参数总规定角度([number]deg)
rotate3d(x,y,z,angle);定义30D旋转
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转换元素定义透视视图
CSS3--transform的更多相关文章
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 小心 CSS3 Transform 引起的 z-index "失效"
https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...
- CSS3 transform rotate(旋转)锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- CSS3 transform对普通元素的N多渲染影响
一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...
- CSS3 transform 属性
CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...
- 基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class= ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
- CSS3 transform rotate(旋转)锯齿/元素抖动模糊的解决办法
使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...
随机推荐
- ORA-1034 ORACLE not available (转)
http://blog.csdn.net/onlyone_htliu/article/details/6075150 前言 每一个DBA在进行数据库管理的过程中不可避免的要遇到形形色色的错误(ORA- ...
- 这次是Selenide测试自动发送博客
asdfasfdfsdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaafdsfasdfdas
- C# TimeSpan 计算时间差(时间间隔)
命名空间:System 程序集:mscorlib(在 mscorlib.dll 中) 说明: 1.DateTime值类型代表了一个从公元0001年1月1日0点0分0秒到公元9999年12月31日23点 ...
- 阿里云CDN刷新预热接口
阿里云OSS映射的文件地址需要即时访问到最新数据,需要即时调用CDN的刷新预热类接口 RefreshObjectCaches 刷新接口. 参考官方接口文档资料:https://help.aliyun. ...
- COUNT(1)和COUNT(*)区别
项目经常用到count(1),但是和count(*)什么区别? 从下面实验结果来看,Count (*)和Count(1)查询结果是一样的,都包括对NULL的统计,而count(列名) 是不包括NULL ...
- android源码修改,实现长按电源键直接关机
版本:android 4.4.2 源文件路径:frameworks\base\policy\src\com\android\internal\policy\impl\PhoneWindowManage ...
- WebStorm 11、PhpStorm 10免费激活(不需要注册码)
之前分享的WebStorm9.WebStrom10.PhpStorm9注册码生成网站已经被站长关了,比较遗憾!http://my.oschina.net/ximidao/blog/486353 现在官 ...
- POJ 3233 Matrix Power Series(构造矩阵求等比)
Description Given a n × n matrix A and a positive integer k, find the sum S = A + A2 + A3 + … + Ak. ...
- SpringMVC框架下实现JSON(类方法中回传数据到jsp页面,使用jQuery方法回传)
JSON的实现,即将需要的数据回传到jsp页面: 1>.加入实现Json的三个架包到lib中:2>.目标方法上边加入注解,需要返回的值3>.在jsp页面中书写jQuery方法: ec ...
- Unity LightmapParameters的使用
Unity5的烘培十分不好用,今天看官方demo时发现可以用LightmapParameters对模型的GI配置进行单独覆写,介绍一下 LightmapParameters可以把全局光照的配置做成预设 ...