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. php函数基本语法之自定义函数

    PHP提供了功能强大的函数,但这远远满足不了需要,程序员可以根据需要自己创建函数.本节就开始学习创建函数的方法.大理石平台价格表 我们在实际开发过程当中需要有很多功能都需要反复使用到,而这些反复需要使 ...

  2. AtCoder Grand Contest 003题解

    传送门 \(A\) 咕咕 const int N=1005; char s[N];int val[N],n; int main(){ scanf("%s",s+1),n=strle ...

  3. php unset

    说明:unset ( mixed $var [, mixed $... ] ) : void unset() 销毁指定的变量. unset() 在函数中的行为会依赖于想要销毁的变量的类型而有所不同. ...

  4. c# 模拟并发请求 ，只能并发2个连接。

    使用 HttpWebRequest 模拟并发请求的时候,发现不管怎么提高thread 的数量,都没用,服务器端用计数器看到的都是2个连接,见下图(关于计数器怎么开,百度) 然后搜了一下,发现需要在ap ...

  5. 【TensorFlow官方文档】MNIST机器学习入门

    MNIST是一个入门级的计算机视觉数据集,它包含各种手写数字图片:它也包含每一张图片对应的标签,告诉我们这个是数字几.比如,下面这四张图片的标签分别是5,0,4,1. 从一个很简单的数学模型开始:训练 ...

  6. （一）Sql学习之sql语言的组成

    SQL语言是具有强大查询功能的数据库结构化语言.由以下几部分组成: 1.数据定义类SQL(DDL--DATE DEFINITION LANGUAGE) CREATE-创建数据库及其对象(表,索引,视图 ...

  7. [C++] wchar_t关键字使用方法

    char 是单字符类型,长度为一个字节 wchar_t 是宽字符类型,长度为两个字节,主要用在国际 Unicode 编码中 举例: #include<iostream> using nam ...

  8. virtualBox虚拟机Ubuntu系统与主机Windows共享文件夹

    1.在virtualBox虚拟机中安装Ubuntu系统 2.打开虚拟机后,安装VirtualBox增强功能包(VBoxGuestAdditions),参照下图,如果确认已经安装就直接跳过至第4步. 3 ...

  9. 2019-暑假作业-Java语言程序设计

    本文于2017年创建,最后更新2019-07-16 任务列表 1.学会使用Markdown做笔记 本篇随笔就是使用的Markdown语法.养成做笔记的习惯! 参考资料: 极简MarkDown排版介绍( ...

  10. html5的 embed元素 和 object元素

    html5的 embed元素 和 object元素 一.总结 一句话总结: embed定义嵌入的内容,比如插件,比如flash object定义定义一个嵌入的对象,用于包含对象,比如图像.音频.视频. ...