实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
div {
6
    width: 100px;
7
    height: 100px;
8
    background: red;
9
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
10
    transition: width 2s, height 2s, transform 2s;
11
}
12
​
13
div:hover {
14
    width: 200px;
15
    height: 200px;
16
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
17
    transform: rotate(180deg);
18
}
19
</style>
20
</head>
21
<body>
22
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
23
​
24
<div>鼠标移动到 div 元素上，查看过渡效果。</div>
25
</body>
26
</html>
27