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. DBUtils框架ResultSetHandler接口学习

    今儿在学习spring框架的时候,让我想起来之前做项目时一直搁置的一个问题,就是DBUtils框架的做数据库操作的使用,当时制作项目的时候就是通过实例打了一遍,由于时间原因也并没有仔细去了解这一方面. ...

  2. golang-flag - 命令行参数解析

    flag - 命令行参数解析 在写命令行程序(工具.server)时,对命令参数进行解析是常见的需求.各种语言一般都会提供解析命令行参数的方法或库,以方便程序员使用.如果命令行参数纯粹自己写代码解析, ...

  3. 在linux中设置优先使用ipv4,而不是ipv6

    背景: 有时候更新源的时候默认使用ipv6,而ipv6下载数据时候总出现问题. 所有想默认出口的时候优先使用ipv4出口访问,而不是ipv6. 要使用ipv4 连接优先而不必禁用ipv6,需要修改ga ...

  4. Intellij IDEA中maven项目打包问题

    学习使用java写项目的时候,java的jar包对我来说是很神奇又很复杂不想去了解的东西,如今形势所迫开始写java项目,做了些了解,也有几个问题. 1.其中一个打包方式 在pom文件中输入如下插件( ...

  5. linux管道pipe详解

    linux管道pipe详解 https://blog.csdn.net/qq_42914528/article/details/82023408

  6. java sqlite docker，sqlite出错

    1问题1 使用docker镜像部署springboot程序,sqlite出错,在windows和linux环境都没有问题,使用docker部署就报错 Caused by: java.lang.Unsa ...

  7. Linux 之数组

    数组 和其他编程语言一样,Shell 也支持数组.数组(Array)是若干数据的集合,其中的每一份数据都称为元素(Element). Shell 并且没有限制数组的大小,理论上可以存放无限量的数据.和 ...

  8. JavaWeb之基础(1) —— 文件、目录结构和创建项目

    1. JavaWeb应用 JavaWeb应用从大类上分为静态和动态两种. 静态应用就是传统的HTML文件+素材资源构造的静态网页,不需要特殊的配置.JavaWeb也不是专门用来做静态网站的. 动态应用 ...

  9. SpringMVC通过注解在数据库中自动生成表

    在application-persistence.xml中的<property name="hibernate.hbm2ddl.auto" value="${hib ...

  10. com.ibm.db2.jcc.am.SqlSyntaxErrorException: DB2 SQL Error: SQLCODE=-418, SQLSTATE=42610, SQLERRMC=null

    写了一条sql,在db2数据库中可以执行,但是转换成mybatis的mapper文件后,在执行排序操作时报该错误. 我排序是这样写的 <if test="orderStr != nul ...