transform是可以实现元素位移,旋转,缩放和变形。
只介绍了2D转换~

    1. translate 位移:改变元素位置 最多设置两个值,一个水平,一个垂直。如果设置为负数,则代表反方向。可设置百分比。
      eg:实现元素脱标绝对居中

      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);

        

      2.rotate 旋转:单位是deg 正数代表顺时针,负数代表逆时针。默认元素的旋转中心在中间位置。可修改旋转中心:transform-origin

      3.scale 缩放:改变元素大小,写的值是倍数,不可以设置负数,值大于1放大,值小于1缩小。
      4.skew 倾斜:改变元素倾斜的角度,单位是deg,第一个值代表水平,第二个值代表垂直。

CSS3的transform 转换的更多相关文章

  1. css3 变形(transform)、转换(transition)和动画(animation)

    http://www.w3cplus.com/content/css3-transform/  在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动tr ...

  2. CSS3入门之转换

    CSS3入门之转换 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !impor ...

  3. css3之2D转换

    css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...

  4. css3的2D转换

    CSS3的2D转换用transform来实现 1.rotate()   /*通过 rotate() 方法,元素顺时针旋转给定的角度.允许负值,元素将逆时针旋转.*/ 2.scal()   /*通过 s ...

  5. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  6. CSS自学笔记(13):CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  7. 20190404-transition、transform转换、animation、媒体查询

    目录 1.transition过渡 1.1简写:transiton:transition-property | transition-duration | transition-timing-func ...

  8. 常用到用css3实现的转换,过渡和动画

    为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...

  9. 分别用canvas和css3的transform做出钟表的效果

    两种方式实际上在js上的原理都是一样的.都是获取时间对象,再获取时间对象的时分秒,时分秒乘以其旋转一刻度(一秒.一分.一小时)对应的角度.css3中要赋值于transform:rotate(角度),c ...

随机推荐

  1. T3118 01完美矩阵【计数,前缀和,差分,好题】

    Online Judge:未知 Label:好题,计数,前缀和 题目描述 一个01矩形被称为是完美01矩形,如果满足下面3个条件: (1)它的四条边上都是1 (2)内部(除了4条边)的0和1的个数之差 ...

  2. Android开发 音视频开发需要了解的专业术语知识

    前言 在摸索一段时间的音视频开发后,越来越发现这个坑的深度真是特别的深. 除了了解Android自带的音视频处理API以外,还得了解一些视频与音频方面的知识.这篇博客就是主要讲解这方面的专业术语.内容 ...

  3. linux和window环境下安装ruby和sass

    linux下安装ruby 下载linux的ruby安装包    http://www.ruby-lang.org/en/downloads/ 将ruby安装包在linux环境下解压    tar -x ...

  4. WebService Exceptions

    一. Exception in thread "main" java.lang.ExceptionInInitializerError at com.sun.xml.interna ...

  5. 不同浏览器Cookie有效期问题

    昨天项目迁移了测试服务器,之后奇怪的问题出现了. IE.谷歌无法登陆,火狐可以登陆. 这个项目先后部署过两个测试服务器.一台正式服务器,登陆都是正常的,这次却突然出现这种奇怪的问题,很是纠结. 通过查 ...

  6. bean的使用

    前言 Spring最基础的功能就是一个bean工厂,所以本文讲解的是Spring生成bean的种种方法及细节,Spring配置文件的名字是bean.xml,定义几个类: 一个Person类: publ ...

  7. Java - 关于覆盖和重写的总结

    公众号偶然看到的一个帖子,构造方法,类方法,final方法,哪些能覆盖,哪些能重载,初学时也是被这些术语搞的很迷糊 现在有时间了对这些做一个总结.全是自己的语言,可能不是很全面,表达意思应该够清楚 一 ...

  8. css设置字体小于12px

    p { white-space: nowrap; font-size: .12rem; -webkit-transform-origin-x: 0; //缩小后文字居左 -webkit-transfo ...

  9. 从0开始学习ssh之岗位管理

    岗位应该有如下属性,id.名称.说明.新建role.java.添加id,name,description并增加三个的get set方法. 之后建立Role.hbm.xml 并加入到applicatio ...

  10. .net面试问题总结

    原文://http://blog.csdn.net/wenyan07/article/details/41541489 用.net做B/S结构的系统,您是用几层结构来开发,每一层之间的关系以及为什么要 ...