402 CSS菜鸟：transform and transition

<!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>
View Code