<!doctype html>
<html>
????<head>
????????<title>標(biāo)題</title>
????????<meta charset="utf-8">
????????<style>
????????????#d1{
????????????????width:100px;
????????????????height:100px;
????????????????border:2px solid red;
????????????????background:yellow;
????????????????font-size:28px;
????????????????font-weight:bold;
????????????????text-align:center;
????????????????line-height:100px;
????????????????border-radius:50%;
????????????????/* 指定屬性 對性能會有優(yōu)化 哪些屬性才有動效 其他的就不用檢測了 */
????????????????transition-property:transform background width height line-height font-size;
????????????????/*2、時長*/
????????????????transition-duration:5s;
????????????????/*3、速度*/
????????????????transition-timing-function:linear;
????????????}
????????????#d1:hover{
? ? ? ? ? ? /* 指定旋轉(zhuǎn)圓心 */
? ? ? ? ? ? ? ? transform-origin:center center;/* left top /10px 10px ..*/
? ? ? ? ? ? /* 要先指定方向再指定角度不然會亂 */
????????????????transform:translateX(300px) rotate(1080deg);
? ? ? ? ? ? ? ? background:red;
? ? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? ? ? height:200px;
? ? ? ? ? ? ? ? line-height:200px;
? ? ? ? ? ? ? ? font-size:60px;
????????????}
????????</style>
????</head>
????<body>
????????<div id="d1">
????????????滾
????????</div>
????</body>
</html>
