[CSS] ch05-01. translate

728x90

첫번째 사진 링크: 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퍼센트 튀어나옴*/
}

728x90

'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

'WEB > CSS' 카테고리의 다른 글

티스토리툴바