반응형
- 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
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 백그라운드(background)에 사진 넣기 (0) | 2020.12.26 |
|---|---|
| [HTML & CSS] outline(테두리) 의 종류와 스타일 (0) | 2020.12.20 |
| [HTML & CSS] a, onclick 태그 (새창/팝업/현재창) 열기 (0) | 2020.12.04 |
| [HTML & CSS] 테두리 굴곡(border radius) 주기 (0) | 2020.11.30 |
| [HTML & CSS] 네비게이션 바(Navigation Bar) 기본 (0) | 2020.11.28 |
댓글