Notice
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
관리 메뉴

Jade_o.o

[css] transition & transform 실습 - 이미지 연달아 나열하기 본문

CSS

[css] transition & transform 실습 - 이미지 연달아 나열하기

by jade 2024. 1. 13. 13:21

 

해변 이미지 3개로 transition & transform 활용하여 

이미지 연달아 나열하기(각 다른 방식으로)

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습 - 이미지 연달아 나열하기(transition & transform)</title>
    <link rel="stylesheet" href="./css_test18.css">
</head>
<body>
    <div class="container">
        <div class="item1">
            <img src="./img/beach1.jpg" alt="beach1" class ="img1">
        </div>
        <div class="item2">
            <img src="./img/beach2.jpg" alt="beach2" class ="img2">
        </div>
        <div class="item3">
            <img src="./img/beach3.jpg" alt="beach3" class ="img3">
        </div>
    </div>

</body>
</html>

ver1. html 코드

 

.img1{
    position: absolute;
    top: 300px;
    left: 400px;
    width: 400px;
    height: 300px;
    transform: skewY(30deg);
    transition: transform 1s;
    z-index: 3;
}
.img2{
    position: absolute;
    top: 250px;
    left: 600px;
    width: 400px;
    height: 300px;
    transform: skewY(30deg);
    transition: transform 1s;
    z-index: 2;
}
.img3{
    position: absolute;
    top: 200px;
    left: 800px;
    width: 400px;
    height: 300px;
    transform: skewY(30deg);
    transition: transform 1s;
    z-index: 1;
}
.img1:hover{
    transform: rotate(0);
    z-index: 4;
}
.img2:hover{
    transform: rotate(0);
    z-index: 4;
}
.img3:hover{
    transform: rotate(0);
    z-index: 4;
}

ver1. css 코드

ver1. 코드 실행 시 결과창

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습 - 이미지 연달아 나열하기(transition & transform)</title>
    <link rel="stylesheet" href="./css_test18_2.css">
</head>
<body>
    <div class="container">
        <div class="beach beach1">
            <img src="./img/beach1.jpg" alt="beach1">
        </div>
  
        <div class="beach beach2">
            <img src="./img/beach2.jpg" alt="beach2">
        </div>
  
        <div class="beach beach3">
            <img src="./img/beach3.jpg" alt="beach3">
        </div>
      </div>
</body>
</html>

ver2. html 코드

 

img {
    width: 300px;
    height: 200px;
  }

  .container {
    width: 1000px;
    height: 500px;
    background-color: #e7e7e7;
    position: relative;
  }

  .beach {
    position: absolute;
    transform: skewY(30deg);
    transition: 1s;
    cursor: pointer;
  }

  .beach:hover {
    transform: skew(0);
  }

  .beach1 {
    top: 180px;
    left: 200px;
    z-index: 3;
  }

  .beach2 {
    top: 150px;
    left: 350px;
    z-index: 2;
  }

  .beach2:hover {
    z-index: 3;
  }

  .beach3 {
    top: 120px;
    left: 500px;
  }

  .beach3:hover {
    z-index: 3;
  }

ver2. css 코드

 

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] transform 실습 - 함수 여러개 사용  (0) 2024.01.13
[css] animation 실습 - 공 움직이기  (1) 2024.01.13
[css] 종합실습 - 오버워치 캐릭터창 만들기(background&flex)  (0) 2024.01.13
[css] background 실습 - 프로필 만들기  (1) 2024.01.13
[css] Flexbox 실습 - header 만들기  (0) 2024.01.13
'CSS' Related Articles more