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. bzoj3637: Query on a tree VI

    Description You are given a tree (an acyclic undirected connected graph) with n nodes. The tree node ...

  2. UIview lianxi

    // 创建一个和屏幕大小相同的window,记住[UIScreen mainScreen].bounds 是获取当前屏幕大小 self.window = [[[UIWindow alloc] init ...

  3. 【技术贴】解决前台js传参中文乱码

    方法1: 前台两次编码,后台一次解码.因为getParamet已经自动解了一次了. JavaScript: window.self.location="list.jsp?searchtext ...

  4. 不管，干一个HAPROXY先

    说不定要用到的塞.... 1.wget http://www.haproxy.org/download/1.5/src/haproxy-1.5.12.tar.gz 2.tar -zxvf haprox ...

  5. Replicate String in C#

    My original posting on string repetition caused a couple responses, and is currently among the Top P ...

  6. 想做Android Wear开发？你得先搞明白这四件事

    手环和手表的腕上穿戴之争,随着Apple Watch发布和Android Wear不断完善而告一段落.尽管续航上略有缺陷,但手表以其类似手机可扩展的生态环境赢得了众多巨头的支持. Google曾透露, ...

  7. 5451 HDU Best Solver

    链接: Best Solver 题目分析: 这个题目的关键点是需知道“共轭”. 如 :(A√B + C√D)  和 (A√B - C√D) 是共轭的 这个有一个规律 (A√B + C√D)^n + ( ...

  8. 【动态规划】Vijos P1218 数字游戏（NOIP2003普及组）

    题目链接: https://vijos.org/p/1218 题目大意: 一个N个数的环,分成M块,块内的数求和%10,最后每块地值累乘,求最大和最小. n(1≤n≤50)和m(1≤m≤9)太小了可以 ...

  9. HDOJ(HDU) 2153 仙人球的残影(谜一样的题、、、)

    Problem Description 在美丽的HDU,有一名大三的同学,他的速度是众所周知的,跑100米仅仅用了2秒47,在他跑步过程中会留下残影的哎,大家很想知道他是谁了吧,他叫仙人球,既然名字这 ...

  10. 路由器刷机常见第三方固件及管理前端种类(OpenWrt、Tomato、DD-Wrt)

    目前路由器折腾刷机,除了采用各品牌的原厂固件外,第三方路由器固件,基本就是:Tomato.DD-WRT.OpenWRT三种. 基本上所有第三方路由器固件的架构上可分为前端(Frontend)和后端(B ...