728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.origin {
width: 200px;
height: 300px;
border: 1px solid black;
margin: 30px;
float: left;
}
.origin > div{
width: 200px;
height: 300px;
background-color: beige;
}
img {
width: 200px;
height: 300px;
}
.rotateX:hover {
transform: rotateX(50deg);
}
#pers {
perspective: 300px;
}
#pers > div {
transition: 2s ease-in;
}
#skewx{
transform: skewX(30deg);
}
#skewy{
transform: skewY(15deg);
}
</style>
</head>
<body>
<h4>원본 이미지</h4>
<div class="origin">
<img src="../Resource/sunset.jpg" alt="태양">
</div>
<div class="origin" id="pers">
<div class="rotateX">
<img src="../Resource/sunset.jpg" alt="태양">
</div>
</div>
<div class="origin">
<div id="skewx"></div>
</div>
<div class="origin">
<div id="skewy"></div>
</div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| transform연습 (0) | 2022.12.29 |
|---|---|
| transition 연습 (0) | 2022.12.29 |
| teansform2 (0) | 2022.12.29 |
| teansform기본 (1) | 2022.12.29 |
| 가상선택자3 (0) | 2022.12.29 |