728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        #container {
            width: 1000px;
            margin: 20px auto;
        }
        h1 {
            text-align: center;
        }
        img {
            width: 300px;
            height: 400px;
        }

        .prod-list {
            list-style: none;
            padding: 0;
        }

        .prod-list li {
            position: relative;
            float: left;
            padding: 0;
            margin: 10px;
        }

        .prod-list .caption {
            position: absolute;
            top: 200px;
            width: 300px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0; /* 화면에 보이지 않게하기*/
            transition: all 0.6s ease-in-out; /* 모든 요소에 시작과 끝 부분을 0.6초 동안 애니메이션 적용*/
        }

        .prod-list li:hover .caption{
            transform: translateY(-200%px);
            opacity: 1;
        }

        .prod-list .caption h2, p {
            color: white;
            text-align: center;
        }



    </style>
</head>
<body>
    <div id="container">
        <h1>신상품 목록</h1>
        <ul class="prod-list">
            <li>
                <img src="../Resource/phone_case/phone_case1.jpg" alt="">
                <div class="caption">
                    <h2>상품 1</h2>
                    <p>상품 1의 설명텍스트</p>
                    <p>가격 : 10,000원</p>
                </div>
            </li>
            <li>
                <img src="../Resource/phone_case/phone_case2.jpg" alt="">
                <div class="caption">
                    <h2>상품 2</h2>
                    <p>상품 2의 설명텍스트</p>
                    <p>가격 : 20,000원</p>
                </div>
            </li>
            <li>
                <img src="../Resource/phone_case/phone_case3.jpg" alt="">
                <div class="caption">
                    <h2>상품 3</h2>
                    <p>상품 3의 설명텍스트</p>
                    <p>가격 : 30,000원</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

animation 예제2  (0) 2022.12.29
animation 예제1  (0) 2022.12.29
transition 연습  (0) 2022.12.29
transform3  (0) 2022.12.29
teansform2  (0) 2022.12.29
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
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>transform</title>
            <meta charset="UTF-8">
            <style>
                /* transform : 요소의 형태나 위치를 변환시키기 위해 사용한다.*/
                div {
                    top: 50%;
                    left: 50%;
                    width: 300px;
                    height: 300px;
                    background-color: rgb(1, 252, 252);
                    transform: translate(-50%, -50%) rotate(45deg) scale(50%);
                    /* transform 함수
                    - 띄우기로 구분하여 여러 함수 사용 가능
                    translate(x, y) : x 축으로 a만큼, y축으로 b만큼, a나 b에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.
                    translateX(a) : x축으로 a만큼. a에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.
                    translateY(b) : y축으로 b만큼. b에 %값이 들어가면 각 값은 가로길이, 세로길이의 비율이 됨.
                    rotate(x) : a도 만틈 회전함. 반드시 deg단위 사용
                    scale(a) : a비율 만틈 확대/축소한다. 기본 값 1(100%)
                    */
                    position: absolute;
                }

            </style>
    </head>
    <body>
       <div></div>
       <div></div>
    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

for(반복문)  (0) 2022.12.25
transition(CSS속성 변환 시간제어)  (0) 2022.12.24
padding(외부 여백)  (0) 2022.12.24
position  (0) 2022.12.24
opacity(투명도 설정)  (0) 2022.12.24

+ Recent posts

728x90
반응형
">

티스토리툴바