一、2D变形

　　1、变形

　　　　transform:translate();translateX();translateY();translate(,);

　　2、过渡

　　　　transition:all 1s;

二、具体体现的例子

　　1、位移的实例　　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>css3的2D变形</title>

    <style>

    div{

        width: 100px;

        height:100px;

        background-color: skyblue;

    }

    div:active{

        /* transform: translate(100px);写一个值：只有水平位移 */

        /* transform: translate(100px,200px);写两个值，一个水平一个竖直 */

        /* transform: translateX(100px);水平位移 */

        /* transform: translateY(100px);垂直位移 */

        /* 另外这里也可以写百分比，而这个百分比的参照物是自身 */

    }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

　　2、缩放

　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>css3的2D变形</title>

    <style>

    div{

        width: 100px;

        height:100px;

        background-color: skyblue;

        /* 让所有元素的变化到时在1秒钟缓步进行 */

        transition: all 1s;

    }

    div:active{

        /* 位移 */

        /* transform: translate(100px);写一个值：只有水平位移 */

        /* transform: translate(100px,200px);写两个值，一个水平一个竖直 */

        /* transform: translateX(100px);水平位移 */

        /* transform: translateY(100px);垂直位移 */

        /* 另外这里也可以写百分比，而这个百分比的参照物是自身 */

        /* 缩放 */

        /* transform: scale(1.2);相对于自身的1.2倍 宽高*/

        /* transform: scaleX(1.2);宽度相对于自身的1.2倍 */

        /* transform: scaleY(1.2);高度相对于自身的1.2倍 */

    }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

　　3、旋转

/* 旋转 */

        /* transform-origin: center; */

        /* 这里是默认的旋转参考点 ，还可以自行设置像素值，百分比等*/

        /* transform: rotate(-90deg);正负值代表旋转的方向 */

　　4、倾斜

 /* 倾斜 */

        /* transform: skew(90deg,0);水平垂直 */

        /* transform: skewX(60deg);水平 */

        /* transform: skewY(60deg);垂直 */

css3的2D变形的更多相关文章

  1. CSS3(3)---2D变形(transform)

    CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...

  2. CSS3过渡、变形和动画

    1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{     text-decoration: n ...

  3. CSS3 过渡、变形和动画

    一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...

  4. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  5. 【CSS3练习】transform 2d变形实例练习

    transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...

  6. 9.css3动画-2D/3D变形--trasform

    transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...

  7. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

  8. CSS3的2D与3D转换

    2D和3D转换涉及到数学中的知识,作为一个数学专业的毕业生,不研究一下岂不是对不起自己的专业? 首先来看几个参数: 1.transform-origin:origin(起源,起点),也即变形的起点,在 ...

  9. css3之2D转换

    css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...

随机推荐

  1. curl 基础

    简介 curl 是常用的命令行工具,用来请求 Web 服务器.它的名字就是客户端(client)的 URL 工具的意思. 它的功能非常强大,命令行参数多达几十种.如果熟练的话,完全可以取代 Postm ...

  2. 8 包含min函数的栈

    0 引言 题目:定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min.push及pop的时间复杂度都是O(). 1 抽象问题具体化 2 具体问题抽象分析 需要解 ...

  3. System.Web.Mvc.RoutePrefixAttribute.cs

    ylbtech-System.Web.Mvc.RoutePrefixAttribute.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutra ...

  4. k8s 安装

    1.1 k8s的架构 除了核心组件,还有一些推荐的Add-ons: 组件名称 说明 kube-dns 负责为整个集群提供DNS服务 Ingress Controller 为服务提供外网入口 Heaps ...

  5. C++的注释

    ### 1.2 注释 **作用**:在代码中加一些说明和解释,方便自己或其他程序员程序员阅读代码 **两种格式** 1. **单行注释**:// 描述信息  - 通常放在一行代码的上方,或者一条语句的 ...

  6. READING | 我是一只IT小小鸟

    “世界是如此的熙熙攘攘,让年轻的心找不到方向,但这些人是不能小看的啊,如果他们开始敲打自己的命令行.” “知之者不如好知者,好之者不如乐之者”,很多IT界的优秀人才都对计算机技术或者IT技术有着浓厚的 ...

  7. 2019-11-12-浅谈-Windows-桌面端触摸架构演进

    title author date CreateTime categories 浅谈 Windows 桌面端触摸架构演进 lindexi 2019-11-12 14:37:31 +0800 2019- ...

  8. html--图片背景兼容，兼容IE6

    在IE6中对图片格式png24支持度不高, 如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题, 但是使用png8代替png2 ...

  9. crontab[计划任务]，tar[压缩]，grep[查找]

    计划任务:1.新建一个计划任务:crontab -e -----> 3*/1 * * * * date >> /tmp/data.txt查看计划任务:crontab -l.如果超过6 ...

  10. VS2010版的Speex音频处理模块(附源码+测试demo)

    开源的Speex代码内部包含了VS2003,05,08工程,但是直接编译总有一些要设置的地方,虽说也不是很复杂,但是对于不是很了解VS的同学来说还是要折腾一阵,所以我弄了一个可以直接使用的版本,当然是 ...