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. linux 登录后有时候会出现-bash-4.1$

    转载自https://blog.csdn.net/jiedao_liyk/article/details/78470498 linux登录后有时候会出现-bash-4.1$ 造成这样的原因: 与这个用 ...

  2. 在Ubuntu 或 Debian 系统环境安装MYSQL数据库

    一.第一步下载myslq安装程序 sudo apt-get install mysql-server mysql-client apt-get程序会自动下载安装最新的mysql版本.在安装的最后,它会 ...

  3. 2017.10.5 国庆清北 D5T2 整除

    80分暴力 /*找规律80分TLE俩点 忘了啥规律了. */ #include<iostream> #include<cstdio> #include<cmath> ...

  4. Tyvj P2044 ["扫地"杯III day2]旅游景点

    二次联通门 : Tyvj P2044 ["扫地"杯III day2]旅游景点 /* Tyvj P2044 ["扫地"杯III day2]旅游景点 并查集 先把大 ...

  5. C++中unique函数的用法总结

    个人感觉,unique是STL中很实用的函数之一,需要#include,下面来简单介绍一下它的作用. unique的作用是"去掉"容器中相邻元素的重复元素,这里去掉要加一个引号,为 ...

  6. （1）Angular的开发

    流行的ReactNative.Node.js.Angular.js.RXjs等技术 H5视频直播 ReactNative应用 JavaScript的新语法 高性能服务端框架 Webpack支撑大规模应 ...

  7. OpenStack Restful API框架介绍

    1  pecan框架介绍 1.1  什么是pecan pecan是一个轻量级的python web框架,最主要的特点是提供了简单的配置即可创建一个wsgi对象并提供了基于对象的路由方式. 主要提供的功 ...

  8. (4)Go程序结构和流程控制

    Go程序主要由以下几部分组成:(具体可以参考2选择结构中的实例) *包声明 *导入包 *函数 *变量 *语句和表达式 *注释 流程控制 1.顺序结构 2.选择结构  (1)if else if 和 e ...

  9. 数据库已经最优，每次操作50万条数据，怎么提高API接口的速度？

    第一种可以使用负载均衡,10台,就每台5W条数据第二种每台机器.可以把添加任务队列.利用多线程解决IO密集型任务的特点.第三种利用异步协程方式提高调度行为

  10. leetcode 467. 环绕字符串中唯一的子字符串

    题目描述: 把字符串 s 看作是“abcdefghijklmnopqrstuvwxyz”的无限环绕字符串,所以 s 看起来是这样的:"...zabcdefghijklmnopqrstuvwx ...