CSS3旋转加放大实例

2018-01-12T19:04:09
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>旋转加放大</title>
   <style>
   div {
       font-size: 14px;
       font-weight: bold;
       line-height: 50px;
       position: fixed;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       width: 200px;
       height: 50px;
       margin: auto;
       cursor: pointer;
       text-align: center;
       background: #abcdef;
       -webkit-transform:rotate(0deg) scale(1);
       -moz-transform:rotate(0deg) scale(1);
       -o-transform:rotate(0deg) scale(1);
       transform:rotate(0deg) scale(1);
       -webkit-transition:transform 1s ease-in-out 0.5s;
       -moz-transition:transform 1s ease-in-out 0.5s;
       -o-transition:transform 1s ease-in-out 0.5s;
       transition:transform 1s ease-in-out 0.5s;
   }
   div:hover{
       -webkit-transform:rotate(180deg) scale(2);
       -moz-transform:rotate(180deg) scale(2);
       -o-transform:rotate(180deg) scale(2);
       transform:rotate(180deg) scale(2);
   }
</style>
</head>
<body>
   <div>旋转加放大</div>
</body>
</html>

旋转180度,放大一倍,注意兼容性问题

/**THE END*/

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。