반응형
- code -
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.origin{
width: 40%;
}
.reverse {
width: 40%;
transform:rotate(90deg);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
</style>
<title>이미지 반전</title>
</head>
<body>
<img src="https://mblogthumb-phinf.pstatic.net/MjAxOTAzMTRfMjk1/MDAxNTUyNTM5NTY3NjA0.-7lhdCTptgE24PXSAsFnmCZV9ZErUp8XrCesxj00pmUg._GsWq4kfVXZKMEcZT5gNEbb2K-Jabw_cB7AEOXXlESsg.JPEG.lotteblog/%EC%95%84%EC%9D%B4%EC%9C%A0_%ED%8F%AC%ED%86%A0%EC%B9%B4%EB%93%9C_1.jpg?type=w800" class="origin">
<img src="https://mblogthumb-phinf.pstatic.net/MjAxOTAzMTRfMjk1/MDAxNTUyNTM5NTY3NjA0.-7lhdCTptgE24PXSAsFnmCZV9ZErUp8XrCesxj00pmUg._GsWq4kfVXZKMEcZT5gNEbb2K-Jabw_cB7AEOXXlESsg.JPEG.lotteblog/%EC%95%84%EC%9D%B4%EC%9C%A0_%ED%8F%AC%ED%86%A0%EC%B9%B4%EB%93%9C_1.jpg?type=w800" class="reverse">
<img src="https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile1.uf.tistory.com%2Fimage%2F99962D385EF4533135A720" class="origin">
<img src="https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile1.uf.tistory.com%2Fimage%2F99962D385EF4533135A720" class="reverse">
</body>결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & jQuery] input 태그안에 type 값 변경 초간단 방법 !! (0) | 2021.07.12 |
|---|---|
| [Html & jQuery] input 태그안에 value 값 넣는 초간단 방법 !! (0) | 2021.07.11 |
| [HTML & CSS] 움직이는 Animation 효과 넣기 ! (0) | 2021.04.15 |
| [HTML & CSS] 다양한 특수문자, 기호(Symbol)들 입력값 # 1 (0) | 2021.03.16 |
| [HTML & CSS] Text Shadow(텍스트 그림자 효과) 넣기 (0) | 2021.03.08 |
댓글