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. C# CRC16校验码 1.0

      /// <summary> /// 计算CRC16校验码 1.0 /// </summary> /// <param name="bytes"&g ...

  2. Linux 命令集合之进程查看命令-软件安装命令-文件查找命令-主机修改命令

    1.dpkg 的使用 dpkg -s ssh 查看是否按装了ssh软件 dpkg -L ssh 查看ssh安装的关联目录结构和安装位置 dpkg -i vim.deb 本地离线安装vim编辑器 apt ...

  3. 【dp】p1025数的划分

    题目描述] 将整数n分成k份,且每份不能为空,任意两份不能相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5: 1,5,1: 5,1,1: 问有多少种不同的分法. 输 ...

  4. vimset

    vim ~./vimrc  vim /etc/vim/vimrc set nocompatible                 "去掉有关vi一致性模式,避免以前版本的bug和局限 se ...

  5. (5)Go数组

    数组 数组是同一种数据类型元素的集合. 在Go语言中,数组从声明时就确定,使用时可以修改数组成员,但是数组大小不可变化. 基本语法: // 定义一个长度为3元素类型为int的数组a var a [3] ...

  6. [luogu 3773][CTSC 2017]吉夫特

     传送门  Solution 输入一个长度为n的数列,求有多少个长度大等于2的不上升子序列满足: \[\prod_{i=2}^{k} C(a_{b_{i-1}},a_{b_i}) mod\ 2 > ...

  7. js判断是不是在微信浏览器打开?

    is_weixin:function(){      var ua = window.navigator.userAgent.toLowerCase();      if (ua.match(/Mic ...

  8. LeetCode 第 159 场周赛

    一. 缀点成线(LeetCode-5230) 1.1 题目描述 1.2 解题思路 比较简单的一题,利用公式 y = kx + b,确定好k和b就好,并且要考虑一种情况,函数 x = h. 1.3 解题 ...

  9. 第十四周助教工作总结——NWNU李泓毅

    助教博客链接:https://www.cnblogs.com/NWNU-LHY/ 本次作业的要求:团队项目需求改进与系统设计:https://www.cnblogs.com/nwnu-daizh/p/ ...

  10. CESIUM内置shader变量和函数[转]

    cesium中内置了一些常量.变量和函数,在vs和fs中可直接使用. 内置uniform 内置uniform主要置于AutomaticUniforms类里面,该类私有未开放文档. czm_backgr ...