---transform属性使用---

1、过度时间 :transition: transform 2s;

2、transform: 应用 2D 或 3D 转换。可以对元素进行旋转、缩放、移动或倾斜。

  (1)2D 转换:transform: matrix(a,a,a,a,x,y);——>abcd二维矩阵、xy表示坐标

  (2) 3D 转换:transform: matrix3d(a,a,a,a,a,a,a,a,a,a,a,a,a,a,a,a);16值矩阵

  (3)2D 转换:transform: translate(x,y); 在xy轴移动指定像素,translateY(y)、translateX(x)

  (4)3D 转换:transform: translate3d(x,y,z);

  (5)2D 缩放:transform: scale(x,y):xy——>在xy轴上面的缩放量,xy用数字,xy为1没变化;可单独操作:scaleY(y),scaleX(x)

  (6)3D缩放:transform:scale3d(x,y,z); xyz——>在xyz轴上面的缩放量,xyz均为数值

  (7)2D旋转:transform: rotate(angle);  angle为旋转的度数,单位为deg,例如旋转90度:90deg;

  (8)3D旋转:transform:rotate3d(x,y,z,angle);  rotateX/Y/Z(angle)沿着 X/Y/Z轴的 3D 旋转

  (9)2D倾斜:skew(x-angle,y-angle); 在XY轴上面的倾斜角度,也可以单独设置某轴上的倾斜角度

CSS3--transform相关属性的更多相关文章

  1. CSS3动画相关属性详解

    本文转载于:<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfo ...

  2. css3 transform 变形属性详解

    本文主要介绍了css3 属性transform的相关内容,针对CSS3变形.CSS3转换.CSS3旋转.CSS3缩放.扭曲和矩阵做了详细的讲解.希望对你有所帮助. 这个很简单,就跟border-rad ...

  3. JavaScript 读取CSS3 transform

    某些场景需要读取 css3 transform的属性 例如 transform:translate(10px,10px) rotate(-45deg); 这该怎么读取呢,正则表达式?毫无疑问这很坑爹 ...

  4. CSS3 Transform、Transition和Animation属性总结

    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

  5. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

  8. CSS3 : transform 与 transform-origin 属性可以使元素样式发生转变

    CSS3 : transform 用于元素样式的转变,比如使元素发生位移.角度变化.拉伸缩小.按指定角度歪斜 transform结合transition可实现各类动画效果 transform : tr ...

  9. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  10. CSS3 transform rotate(旋转)锯齿的解决办法

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

随机推荐

  1. linux下如何查看某个容器的详细信息?

    答: 使用docker inspect <CONTAINER ID>即可

  2. java(SSM)上传文件到七牛云(对象存储)

    项目中会用到大量的图片和小视频,为了分担服务器压力,将文件都放在七牛云.这里的思路很简单, 就是移动端.pc端把文件上传到服务器,服务器做一个临时缓存,保存必要的信息到数据库后, 将文件上传到七牛云, ...

  3. Jmeter使用实践-接口diff测试

    Jmeter使用实践-接口diff测试 大多数人都使用 Jmeter 做过性能测试,但是在使用的过程中你会发现,它不仅可以做性能测试和功能测试,还能够满足基本的接口测试需求. 相比其他工具,Jmete ...

  4. Java数组(1):数组与多维数组

    我们对数组的基本看法是,你可以创建它们,通过使用整型索引值访问它们的元素,并且他们的尺寸不能改变. 但是有时候我们需要评估,到底是使用数组还是更加灵活的工具.数组是一个简单的线性序列,这使得元素访问非 ...

  5. 导出文档设置exportDocument

    <?xml version="1.0" encoding="UTF-8"?> <?eclipse version="3.4" ...

  6. Jenkins - Tips

    01 - RPM包安装方式 默认路径 配置文件:/etc/sysconfig/jenkins 日志文件:/var/log/jenkins/jenkins.log 执行文件:/usr/lib/jenki ...

  7. android#boardcast#发送自定义广播

    广播主要分为两种类型,标准广播和有序广播,通过实践的方式来看下这两种广播具体的区别. 一.发送标准广播 在发送广播之前,我们还是需要先定义一个广播接收器来准备接收此广播才行,不然发出去也是白发.因此新 ...

  8. CentOS7怎么安装图形界面

    step1: 进入下载页,选择阿里云站点进行下载 Actual  Country 国内资源                   Nearby Countries  周边国家资源 阿里云站点:http: ...

  9. python列表展开的方法

    只有一层嵌套的常见方法: # 普通方法 list_1 = [[1, 2], [3, 4, 5], [6, 7], [8], [9]] list_2 = [] for _ in list_1: list ...

  10. (转)asp.net mvc 开发环境下需要注意的安全问题(一)

    概述 安全在web领域是一个永远都不会过时的话题,今天我们就来看一看一些在开发ASP.NET MVC应用程序时一些值得我们注意的安全问题.本篇主要包括以下几个内容 : 认证 授权 XSS跨站脚本攻击 ...