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. P4357 [CQOI2016]K远点对

    题意:给定平面中的 \(n\) 个点,求第 \(K\) 远的点对之间的距离,\(n\leq 1e5,K\leq min(100,\frac{n\times (n-1)}{2})\) 题解:kd-tre ...

  2. react添加富文本

    import {Editor} from 'react-draft-wysiwyg'import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'i ...

  3. learning java Random 和 ThreadLocalRandom类

    var rand = new Random(); System.out.println(rand.nextBoolean()); System.out.println(rand.nextInt()); ...

  4. 数码管动态显示——74HC04

    1.电路设计: p0实现段选,p2实现位选,74hc04是反相器,有反向和放大的双重作用. 2.程序设计: #include<reg52.h> code unsigned char sev ...

  5. Hadoop 副本放置策略的源码阅读和设置

    本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/hadoop_block_placement_policy 大多数 ...

  6. YII框架的事件机制

    一.什么是事件机制 解释:发生了一件事情,然后某些东西对这件事作出反应. 例子:假设发生了A同学结婚事件,然后B同学给份子钱反应,那么,B是怎么知道(监听)A事件的发生了呢,有两种办法. 扫描式:B不 ...

  7. ROS里程计

    gmapping导航建图包里建图需要里程计信息,且导航也需要. 整个移动机器人的控制结构如下图所示,其中base_controller节点将订阅的cmd_vel信息通过串口或其它通信接口发送给下位机( ...

  8. Java SpringBoot注解方式开启异步支持

    package task.demo.controller; import org.springframework.beans.factory.annotation.Autowired; import ...

  9. 用样式表美化QTabwidget外观

    没有仔细看是否正确,先保存到这里,以后研究一下 一.参考文章:http://bbs.csdn.net/topics/390632657?page=1 setStyleSheet("QTabW ...

  10. 【一】SpringMVC框架原理

    springmvc基础知识 1.什么是springMVC 2.springMVC框架原理(掌握) 前端控制器.处理器映射器.处理器适配器.视图解析器 3.springmvc入门程序 目的:对前端控制器 ...