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. atom的使用

    一,Atom介绍 Atom 是 Github 开源的文本编辑器,这个编辑器完全是使用Web技术构建的(基于Node-Webkit).启动速度快,提供很多常用功能的插件和主题,可以说Atom已经足以胜任 ...

  2. 04.Mybatis输出映射之ResultMap

    当实体类中的字段名与数据库中的字段名不一致时需要手动设置映射关系 在Mapper.xml中定义 <!-- resultMap最终还是要将结果映射到pojo上,type就是指定映射到哪一个pojo ...

  3. 2016.8.17上午纪中初中部NOIP普及组比赛

    2016.8.17上午纪中初中部NOIP普及组比赛 链接:https://jzoj.net/junior/#contest/home/1335 本来觉得自己能考高分,但只得160分,并列第九.至少又挤 ...

  4. LUOGU P1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火)

    传送门 解题思路 学习了一下玄学算法--模拟退火,首先要求平衡处,也就是求势能最小的地方,就是求这个点到所有点的距离*重量最小.剩下的几乎是模拟退火的板子了. #include<iostream ...

  5. HTTP的九种请求方法

    HTTP1.0定义了三种请求方法:GET.POST.HEAD HTTP1.1定义了六种请求方法:PUT.DELETE.PATCH.OPTIONS.CONNECT.TRACE 1.get 请求指定页面的 ...

  6. VMware的下载安装

    在学习使用LINNX系统之前,先在自己的电脑上安装一个虚拟机,流行的虚拟机软件有VMware(VMWare ACE).Virtual Box和Virtual PC,它们都能在Windows系统上虚拟出 ...

  7. android 头像选择以及裁剪

    一.布局申明 <ImageView android:id="@+id/head_image" android:layout_width="80dp" an ...

  8. maven 工程搭建

    使用Maven建立一个Quite start 项目 2.命名卫 bhz-parent 3.groupid 为:  bhz 4.artifactId 为: bhz-parent package:为空不填 ...

  9. 70 二叉树的层次遍历 II

    原题网址:http://www.lintcode.com/zh-cn/problem/binary-tree-level-order-traversal-ii/ 给出一棵二叉树,返回其节点值从底向上的 ...

  10. samba初级使用记录

    首先安利一下什么是samba: Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在 ...