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. Tensorflow细节-P80-深度神经网络

    1.本节多为复习内容,从以下图片可见一般: 2.学会使用 from numpy.random import RandomState 然后 rdm = RandomState(1) dataset_si ...

  2. Acwing P283 多边形 题解

    Analysis 总体来说是一个区间DP 此题首先是一个环,要你进行删边操作,剩下的在经过运算得到一个最大值 注意事项: 1.删去一条边,剩下的构成一条线,相当于求此的最大值,经典区间DP该有的样子: ...

  3. 数据库基准测试标准 TPC-C or TPC-H or TPC-DS

    针对数据库不同的使用场景TPC组织发布了多项测试标准.其中被业界广泛接受和使用的有TPC-C .TPC-H和TPC-DS. TPC-C: Approved in July of 1992, TPC B ...

  4. PostgreSQL物理坏块和文件损坏案例分享

    作者简介 王睿操,平安好医数据库架构岗,多年postgresql数据库运维开发工作.曾就职于中国民航信息,迪卡侬.对其他数据库产品也有一定的涉猎. 背景 笔者最近发现很多朋友经常遇到PostgreSQ ...

  5. linux学习2 Linux云计算学习环境介绍

    一.VNC: Virtual Network Computing协议.虚拟网络计算协议. vncviewer:client vncserver:server

  6. sshfs 试用

    sshfs 是基于fuse 开发的可以像使用本地系统一样,通过ssh 协议访问远端服务器文件,有好多方便的用途 数据同步 数据加密访问 做为共享数据卷(基于给容器使用) 安装 yum install ...

  7. pandas数据保存至Mysql数据库

    pandas数据保存至Mysql数据库 import pandas as pd from sqlalchemy import create_engine host = '127.0.0.1' port ...

  8. 从过狗到编写tamper【转载】

    原作者:我会啊D 原文出处:https://www.t00ls.net/articles-52894.html 0x0 前言 在sql注入的时候,很可能会碰到各种厂商的waf,bypass之后,以后每 ...

  9. 开源GIT仓库-----gitlab

    简介:GitLab是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目.它拥有与Github类似的功能,能够浏览源代码 ...

  10. Oracle Audit 功能的使用和说明

    http://blog.itpub.net/9399028/viewspace-712457/审计(Audit) 用于监视用户所执行的数据库操作,审计记录可存在数据字典表(称为审计记录:存储在syst ...