css3動畫之圖片旋轉

本文轉載自查看原文 2016-11-05 15:54 3080

直接上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無標題文檔</title>
    <style>

        body {
            background:#ddd;
        }
        .rotate{
            width: 220px;
            height: 220px;
            margin: 0 auto;
            background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top;
            -webkit-background-size: 220px 220px;
            -moz-background-size: 220px 220px;
            background-size: 220px 220px;
            -webkit-border-radius: 110px;
            border-radius: 110px;
            -webkit-transition: -webkit-transform 2s ease-out;
            -moz-transition: -moz-transform 2s ease-out;
            -o-transition: -o-transform 2s ease-out;
            -ms-transition: -ms-transform 2s ease-out;
        }
        .rotate:hover {
            cursor: pointer;
            -webkit-transform: rotateZ(360deg);
            -moz-transform: rotateZ(360deg);
            -o-transform: rotateZ(360deg);
            -ms-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>
<div class="rotate"></div>
</body>
</html>

OK！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3 實現圖片旋轉 button 元素的css3旋轉動畫 css3制作旋轉動畫 css3立體旋轉動畫 css3旋轉、過渡、動畫屬性代碼：　CSS3動畫，簡單示例（鼠標移上去后，背景圖片旋轉）純css3 3D圖片立方體旋轉動畫特效【CSS3動畫】transform對文字及圖片的旋轉、縮放、傾斜和移動 CSS3動畫（360度旋轉、旋轉放大、放大、移動） CSS3 元素轉圈動畫（元素旋轉動畫）