<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

    #d{

        width:200px;

        height:200px;

        background:blue;

        overflow:hidden;

    }

#dd

{

    width:100px;

    height:100px;

    background:red;

    /*css过渡，给哪个属性加过度*/

    transition:transform 2s;

    margin:50px;

}

#dd:hover

{

    /*css2D转换，让元素放大或减少多少倍，第一个值是宽度，第二个值是高度*/

    transform: scale(3,3);

}

</style>

</head>

<body>

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div id="d">

    <div id="dd">

    </div>

    </div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>

</html>

402 CSS菜鸟：transform and transition的更多相关文章

  1. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

  2. CSS3-网站导航，transform，transition

    网站导航: 1.a:link    visited    hover   active的顺序是很重要的,如果改变顺序,则hover以及active的状态不起作用 2.<a href=" ...

  3. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  4. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  5. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  6. CSS动画详解及transform、transition、translate的区别

    刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...

  7. css中的transform，transition，translate的关系

    transform 旋转(transform是没有动画效果,你改变了它的值,元素的样子就唰的改变了.其中的位移的函数名就叫translate,所以说,translate是transform的一部分.) ...

  8. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  9. css3实践之图片轮播（Transform，Transition和Animation）

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

随机推荐

  1. phpstudy运行时出现没有安装VC库

    系统默认的VC库是安装在C:\Program Files\Common Files\microsoft shared\VC的文件夹里,当运行PHP Study是出现如下的提示: 可以到下面的网站去下载 ...

  2. redis 初步认识一(下载安装redis）

    1.下载redis  https://github.com/MicrosoftArchive/redis/releases 2.开启redis服务 3.使用redis 4.redis可视化工具 一 开 ...

  3. System.Threading.Timer如何正确地被Dispose

    System.Threading.Timer是.NET中一个定时触发事件处理方法的类(本文后面简称Timer),它背后依靠的是.NET的线程池(ThreadPool),所以当Timer在短时间内触发了 ...

  4. iOS开发基础-九宫格坐标(4)

    对iOS开发基础-九宫格坐标(3)的代码进行进一步优化. 新建一个 UIView 的子类,并命名为 WJQAppView ,将 appxib.xib 中的 UIView 对象与新建的视图类进行关联. ...

  5. Spring Boot2.0使用Spring Security

     一.Spring Secutity简介     Spring 是一个非常流行和成功的 Java 应用开发框架.Spring Security 基于 Spring 框架,提供了一套 Web 应用安全性 ...

  6. Linux下redis的安装及配置

    1.去官网下载redis(redis.io) 2.将其解压到根目录下 3.进入解压的目录,然后编译源程序, 如果不是root账户登录的,命令前面需要加sudo make make install PR ...

  7. SQL Server中存储过程的创建命令

    Create Proc 存储过程名称 ( @参数1 参数类型, @参数2 参数类型, ... ... --最后一行参数,别加逗号了,加逗号的意思是表示后面还有参数 ) AS 需要执行的SQL命令 GO ...

  8. mysql自动断开该连接解决方案

    mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决方案 作者: MySQL 的默认设置下,当一个连接的空闲时间超过8小时后,MySQL 就会断开该连接,而 c3p0 连接池则以为该被断 ...

  9. Data Governance

    https://erwin.com/blog/data-preparation-mapping/

  10. Windows 与Office 镜像的区别

    .SW开头是批量授权的版本. .CN开头是简体中文版镜像文件 零售版本. 其实建议使用 SW开头的镜像 可以直接使用KMS进行激活了. 转帖一个百度知道的内容: 看安装包的名称 cn开头的是零售版的, ...