반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>about me</title>
<style>
img{
border:5px solid black;
border-radius:50%;
/* transform:ScaleY(40deg) ScaleX(20deg) ScaleX(30deg); */
/* transform:scaleX(2,2) */
/* transform:translateX(300px); */
/* transform:skewX(45deg); */
transition:transform 3s ease-in-out;
}
img:hover{
/* transform:rotateX(360deg) scale(0.5); */
/* transform:rotateY(360deg) scale(0.5); */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
}
</style>
</head>
<body>
<div>
<img src="img/mylogo.jpg" alt="">
</div>
</body>
</html>참고 사이트
반응형
'Frontend > HTML, CSS, DOM, jQuery' 카테고리의 다른 글
| CSS) Media Query(미디어쿼리) (0) | 2021.12.11 |
|---|---|
| CSS)Animation (0) | 2021.12.11 |
| grid item 움직이기 (0) | 2021.12.07 |
| CSS) Transition (0) | 2021.11.30 |
| CSS) style에 변수처리 (0) | 2021.11.30 |