 |
 |
 |
 |
 |
 |
첫번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99B88E3359A3842A36
두번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/9968863359A3842A24
세번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99CCF53359A3842A0F
네번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99C4A13359A3842A37
다섯번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/9995693359A3842A0A
여섯번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99DA9B3359A3842A35
일곱번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99E4143359A3842A38
사진 파일 5개는 링크를 클릭하여 [이미지를 다른 이름으로 저장]하세요.
첫번째 사진명: 23iden.png
두번째 사진명: f1.png
세번째 사진명: f2.png
네번쨰 사진명: pback.jpg
다섯번째 사진명: pfront.jpg
여섯번째 사진명: titanic.jpg
일곱번째 사진명: woman.png
CSS 강의에 앞서 파일 7개를 다운받아주세요.
그 후 WebContent아래 css, html, img 폴더 생성 후
파일은 img폴더에 html > html폴더에 css > css폴더에 생성하여 코딩해주세요.
01_translate.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Translate3D</title>
<style>
@import "../css/01_translate.css";
</style>
</head>
<body>
<div class="two">
<img src="../img/woman.png" />
</div>
<div class="three">
<img class="i1" src="../img/woman.png" />
</div>
<div class="three">
<img class="i2" src="../img/woman.png" />
</div>
</body>
</html>01_translate.css
@CHARSET "UTF-8";
div{
float: left; /*왼족정렬*/
margin: 10px;
width: 150px;
height: 190px;
background-color: rgba(0,0,255,0,3);
}
.two img:hover{
transform: translate(10px, 10px);
}
.three{
perspective: 100px;/*원근감, 전망, 음수X*/
}
img.i1:hover{
transform: translate3d(0,0,10px);
}
img.i2:hover{
transform: translate3d(0,0,50px);/*50퍼센트 튀어나옴*/
}
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch05-03. rotate (0) | 2017.08.28 |
|---|---|
| [CSS] ch05-02. scale (0) | 2017.08.28 |
| [CSS] ch04-22. tb4 (0) | 2017.08.28 |
| [CSS] ch04-21. tb3 (0) | 2017.08.28 |
| [CSS] ch04-20. tb2 (0) | 2017.08.28 |
댓글