<!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. SQL UNIQUE 约束

    SQL UNIQUE 约束 UNIQUE 约束唯一标识数据库表中的每条记录. UNIQUE 和 PRIMARY KEY 约束均为列或列集合提供了唯一性的保证. PRIMARY KEY 拥有自动定义的 ...

  2. R语言学习——矩阵

    > #矩阵是一个二维数组,每个元素都拥有相同的模式(数值型.字符型或者逻辑型).通过matrix()创建,一般使用格式为:mymatrix<-matrix(vector,nrow=numb ...

  3. STM32 FSMC使用笔记

    最近在使用STM32的FSMC与FPGA做并行通信总线控制,做一下总结 1,利用FSMC读取写入16位数据时的封装函数如下,不这样使用的话在与FPGA进行通信的过程中可能会出现不可预知的错误. #de ...

  4. Python如何将整数转化成二进制字符串

    Python 如何将整数转化成二进制字符串 1.你可以自己写函数采用 %2 的方式来算. >>> binary = lambda n: '' if n==0 else binary( ...

  5. Android艺术——Bitmap高效加载和缓存（1）

    通过Bitmap我们可以设计一个ImageLoader,实现应该具有的功能是: 图片的同步加载:图片的异步加载:图片的压缩:内存缓存:磁盘缓存:网络获取: 1.加载 首先提到加载:BitmapFact ...

  6. BEX5下新建任务到待办任务

    List<OrgUnit> list = new ArrayList<OrgUnit>(); // 1.查询出执行者 String sql = "select t.f ...

  7. red()、redinle()、redlines()三者之间的关系

    # 关于read()方法: # 1.读取整个文件,将文件内容放到一个字符串变量中 # 2.如果文件大于可用内存,不可能使用这种处理 file_object = open("a.txt&quo ...

  8. 安装 Power BI 报表服务器

    开始之前 建议在安装 Power BI 报表服务器之前先查看安装 Power BI 报表服务器所要满足的硬件和软件要求. Power BI 报表服务器产品密钥 Power BI Premium 如果已 ...

  9. python之动态参数 *args,**kwargs和命名空间

    一.函数的动态参数 *args,**kwargs, 形参的顺序1.你的函数,为了拓展,对于传入的实参数量应该是不固定,所以就需要用到万能参数,动态参数,*args, **kwargs 1,*args ...

  10. Django的View(视图)和路由系统

    一.Django的View(视图) 1.介绍 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一 ...