transform 2d变形实例练习：练习了旋转 倾斜 缩放的功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>transform</title>

    <style>

        .box{background-color: #000;width: 100px;height: 100px;transition: 2s ease;margin:20px;display: inline-block;}

        /* 旋转 */

        #box:hover{transform:rotate(360deg);}

        /*  X 和 Y 轴的 2D 倾斜转换 */

        #box2:hover{transform:skew(45deg,0deg);}

        /*  x y 缩放 */

        #box3:hover{transform:scale(2,2);}

        /*  x y 转换 */

        #box4:hover{transform:translateX(200px) translateY(200px);}

    </style>

</head>

<body>

    <div class="box" id="box"></div>

    <div class="box" id="box2"></div>

    <div class="box" id="box3"></div>

    <div class="box" id="box4"></div>

</body>

</html>

　　

【CSS3练习】transform 2d变形实例练习的更多相关文章

  1. css3 变换 transform(2D)

    一.transform变换 可做拉伸.压缩.旋转.偏移的效果.需加各个浏览器前缀. 二.transform-origin 为transform属性值的基点,默认值为元素的中心位置,即以元素左上角为坐标 ...

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

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

  3. CSS3动画属性：变形(transform)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 语法 t ...

  4. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  5. css3的2D变形

    一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二. ...

  6. CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)

    transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...

  7. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  8. CSS变形transform(2d)

    前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...

  9. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

随机推荐

  1. learning java AWT Pannel

    import java.awt.*; public class PanelTest { public static void main(String[] args) { var f = new Fra ...

  2. windbg调试托管代码 .Net clr

    现在很多的程序都是多语言混合编程的,比如我司的产品,就是用C++/.net clr混合编制的.那么当我们调试这样的程序时,一定要注意,比如有时我们只看到c++的栈和名称,而.net clr的代码确看不 ...

  3. 10分钟用Python爬取最近很火的复联4影评

    欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! <复仇者联盟4:终局之战>已经上映快三个星期了,全球票房破24亿美元,国内票房破40亿人民币. 虽然现在热度逐渐下降,但是我们还 ...

  4. Firefox修復QQ快速登錄

    中了一次毒,然後火狐裏面就不能用QQ的快捷登錄了,後找到修復方法: 將QQ的四個文件放入火狐的插件文件夾裏面即可. 1.QQ文件目錄: C:\Program Files (x86)\Tencent\Q ...

  5. CODE FESTIVAL 2016 Grand Final 题解

    传送门 越学觉得自己越蠢--这场除了\(A\)之外一道都不会-- \(A\) 贪心从左往右扫,能匹配就匹配就好了 //quming #include<bits/stdc++.h> #def ...

  6. AtCoder Grand Contest 004题解

    传送门 \(A\) 咕咕 int a,b,c; int main(){ scanf("%d%d%d",&a,&b,&c); if((a&1^1)|( ...

  7. 【一起来烧脑】一步学会CSS3体系

    [外链图片转存失败(img-yfi1VPyy-1563434266398)(https://upload-images.jianshu.io/upload_images/11158618-fc8784 ...

  8. 游戏服务器与客户端交互，或者与跨服交互都有消息加密方式，为什么不明文传递，加md5校验呢

    游戏服务器与客户端交互,或者与跨服交互都有消息加密方式,为什么不明文传递,加md5校验呢

  9. gdb tui设置默认窗口高度

    gdb -p 12999 -tui 先显示win信息(输入:info win) 显示如下: SRC (35 lines) <has focus> CMD (17 lines) 我们要改的是 ...

  10. FCS省选模拟赛 Day1

    Description  Solution T1 shopping 目测是插板法乱搞一下 发现题解写的是容斥dp: \[ ans = \sum_i (-1)^ig[i] \] \(g[i]\)表示的有 ...