<!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. isPrototypeOf、instanceof、hasOwnProperty函数介绍

    isPrototypeOf 作用:检测一个对象是否是另一个对象的原型.或者说一个对象是否被包含在另一个对象的原型链中 var p = {x:1};//定义一个原型对象 var o = Object.c ...

  2. 检测web界面不能访问后重启

    检测并重启脚本:checkAndRestart.sh #!/bin/bash nowpath=$(cd ")";pwd) source $nowpath/omcparam.prop ...

  3. Python—kmeans算法学习笔记

    一.   什么是聚类 聚类简单的说就是要把一个文档集合根据文档的相似性把文档分成若干类,但是究竟分成多少类,这个要取决于文档集合里文档自身的性质.下面这个图就是一个简单的例子,我们可以把不同的文档聚合 ...

  4. WinForm调用钉钉获取考勤结果

    关注点: 1.钉钉AccessToken的获取和防止过期 2.使用TPL并行编程调用钉钉接口 需求详解 公司前台有个大屏,领导想显示全部员工的考勤结果统计情况和车间的实时监控视频,还有车间的看板.简单 ...

  5. iOS 钥匙串存储用户数据

    参考: http://www.jianshu.com/p/f6d40065bb6c #import <Foundation/Foundation.h> #import <Securi ...

  6. mac用BootCamp装windows装完之后驱动问题

    刚装完会有一个临时盘里面找到BootCamp文件夹然后运行setup.exe,装完即可.

  7. java的List列表转成Tree（树形）结构列表

    直接看借鉴博客:https://blog.csdn.net/massivestars/article/details/53911620/ 由于我的业务没有父子级id两个字段,只有一个层级id字段来分层 ...

  8. vue.js实战——vue元素复用

    Vue在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,例: <!DOCTYPE html> <html lang="en"> <he ...

  9. java从Swagger Api接口获取数据工具类

  10. vue脚手架工具

    1.安装node.js 2.安装vue-cli npm install vue-cli -g vue -V(-V大写)查看版本信息 3.安装webpack 4.初始化项目 vue init webpa ...