1. 旋转函数rotate()，deg表示度数，transform-origin表示旋转的基点

    <head>
    
    <title>无标题文档</title>
    
    <style>
    
        body{height:400px;border:1px solid #000;}
    
        .box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;}
    
        body:hover .box{ -webkit-transform:rotate(360deg);}
    
    </style>
    
</head>
    
<body>
    
    <div class="box">111</div>
    
</body>
  2. 斜切，将矩形等形状扭曲，skewX(100deg),skrewY(30deg),以及x方向和y方向都斜切skew(15deg, 30deg) 
    <head>
    
    <title>无标题文档</title>
    
    <style>
    
        body{height:400px;border:1px solid #000;}
    
        .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
    
        body:hover .box{ -webkit-transform:skewX(45deg);}
    
    </style>
    
</head>
    
<body>
    
    <div class="box">111</div>
    
</body>
  3. 缩放，scale() 
    <head>
    
    <title>无标题文档</title>
    
    <style>
    
        body{height:400px;border:1px solid #000;}
    
        .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
    
        body:hover .box{ -webkit-transform:scale(2);}
    
    </style>
    
</head>
    
<body>
    
    <div class="box">111</div>
    
</body>
  4. 位置移动，translate(100px 200px)，translateX(100px)，translateY(200px) 
    <head>
    
    <title>无标题文档</title>
    
    <style>
    
        body{height:400px;border:1px solid #000;}
    
        .box{width:100px;height:100px;background:Red;margin:100px auto 0; transition:2s;}
    
        body:hover .box{ -webkit-transform:translate(-100px,200px);}
    
    </style>
    
</head>
    
<body>
    
    <div class="box">111</div>
    
</body>

css3 2D变换 transform的更多相关文章

  1. CSS3 2D 变换

    CSS2D transform 表示2D变换,目前获得了各主流浏览器的支持,是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,可以取代大量之前只能靠Flash才 ...

  2. css3 -- 2D变换

    1.transform 1 E{ 2 -moz-transform:function(value): 3 -ms-transform:function(value): 4 -o-transform:f ...

  3. CSS3 2D Transform

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

  4. css3 过渡和2d变换——回顾

    1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...

  5. css3 2D转换（2D Transform） 动画（Animation）

    transform 版本:CSS3 内核类型 写法 Webkit(Chrome/Safari) -webkit-transform Gecko(Firefox) -moz-transform Pres ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 2D变换1

    通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...

  7. 详解如何用 CSS3 完成 3D transform变换

    Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...

  8. CSS3(3)---2D变形(transform)

    CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...

  9. HTML 学习笔记 CSS3 (2D Matrix)

    Matrix 矩阵 那么什么是矩阵呢? 矩阵可以理解为方阵,只不过 平时方阵里面站着人 矩阵中是数值: CSS3中的矩阵: css3中的矩阵指的是一个方法,书写为matrix() 和 matrix3d ...

随机推荐

  1. Hadoop 学习笔记 （八） hadoop2.2.0 测试环境部署 及两种启动方式

    1基本流程步骤1:准备硬件(linux操作系统)步骤2:准备软件安装包,并安装基础软件(主要是JDK)步骤3:修改配置文件步骤4:分发hadoop步骤5:启动服务步骤6:验证是否启动成功!2硬件配置要 ...

  2. BZOJ 3107 二进制a+b

    Description 输入三个整数\(a, b, c\),把它们写成无前导\(0\)的二进制整数.比如\(a=7, b=6, c=9\),写成二进制为\(a=111, b=110, c=1001\) ...

  3. Delphi XE6 for Android 让手机震动（调用Java的函数）

    震动,是调用了 安卓api  JNI 里面的 函数  ,这些都是 调用java的 ,如下面的引用, uses  FMX.Helpers.Android,  Androidapi.JNI.App,  A ...

  4. 通过PHP连接MYSQL数据库 创建数据库 创建表

    通过PHP连接MYSQL数据库  $conn = mysql_connect("localhost","root","password") ...

  5. 「Poetize9」礼物运送

    3055: 礼物运送 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 18  Solved: 12[Submit][Status] Description ...

  6. Light OJ 1018 - Brush (IV)

    题目大意:     一个二维平面上有N个点,一把刷子,刷一次可以把一条线上的所有点都刷掉.问最少刷多少次,可以把全部的点都刷完 状态压缩DP, 用记忆化搜索来写, 需要有个优化不然会超时. ===== ...

  7. 洛谷2344 奶牛抗议（DP+BIT+离散化）

    洛谷2344 奶牛抗议 本题地址:http://www.luogu.org/problem/show?pid=2344 题目背景 Generic Cow Protests, 2011 Feb 题目描述 ...

  8. php 利用第三方软件进行网页快照

    网页快照有很多方法,具体的大家可以百度下.这里我复制一位别人的. 这里我只说下利用第三方软件(Web2Pic_Pro)实现. (1). 下载web2pic_pro软件.下载地址 http://isha ...

  9. 一键安装lnmp脚本

    前段时间一直在找一个快速部署lnmp环境的方法,也没找着,就自己写了一个,结合网上的大神们的.我的方法是脚本结合源码包,很多依赖裤都是yum安装的,这都在脚本里面,需要的源码包我都下载好了,打包成压缩 ...

  10. winform combobox控件绑定 分类： WinForm 2014-04-17 14:34 118人阅读 评论(0) 收藏

    想要达到的效果:把数据库中的一列数据绑定到combobox控件中. 数据库表:T_Task//任务表 列名:Task_Name//名称 主键:Task_ID combobox控件名称:cbName 解 ...