Coding/HTML & CSS

[HTML & CSS] 이미지(image) 회전

포스트it 2020. 12. 7. 10:43
728x90
반응형

 

- code -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>사진 회전</title>
    <style>
    img.logo{
        animation: rotate_image 6s linear infinite; /* 회전 속도 */
        transform-origin: 50% 50%; /* 회전시키는 중심 */
        width: 100px; /* 크기조절 */
    }

    @keyframes rotate_image{
        100% {
            transform: rotate(360deg);
        }
    }
</style>
</head>
<body>
    <div>
        <img src="https://brandslogo.net/wp-content/uploads/2015/09/google-favicon-vector.png" class="logo">
    </div>
</body>
</html>

 

결과물

사진 회전

 

728x90
반응형