HTML5 & CSS3 : transform, transition 속성

ㆍStudy/HTML5 & CSS3

2022.11.01.

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 33



Review

 

 

 

 

 

 

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 33

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        body {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
           background: #ccc;
           text-align: center;
        }
        .col {
            margin: 20px;
        }
        .card {
            position: relative;
            width: 200px;
            height: 200px;
            cursor: pointer;
        }
        .card .icon {
            width: 100%;
            height: 100%;
            line-height: 200px;
        }
        .card .f-card {
            position: absolute;
            background: #fff;
            left: 0;
            right: 0;
            transition: all 0.5s;
        }
        .card .b-card {
            background: #eee;
            color: #f00;
            box-shadow: inset 0 0 10px #ccc;
        }
        #model-1 .card:hover .f-card {
            transform: translateX(-100%)
        }
        #model-2 .card:hover .f-card {
            transform: translateX(100%)
        }
        #model-3 .card:hover .f-card {
            transform: translateY(100%)
        }
        #model-4 .card:hover .f-card {
            transform: translateY(-100%)
        }
        #model-5 .card .f-card {
            transform-origin: 0 0;
        }
        #model-5 .card:hover .f-card {
            transform: rotateX(180deg);
        }    
        #model-6 .card .f-card {
            transform-origin: 0 0;
        }
        #model-6 .card:hover .f-card {
            transform: rotateY(180deg);
        }
        #model-7 .card .f-card {
            transform-origin: 0 100%;
        }
        #model-7 .card:hover .f-card {
            transform: rotateX(180deg);
        }
        #model-8 .card .f-card {
            transform-origin: 100% 0;
        }
        #model-8 .card:hover .f-card {
            transform: rotateY(180deg);
        }
        #model-9 .card .f-card {
            transform-origin: 0 100%;
        }
        #model-9 .card:hover .f-card {
            transform: rotate(180deg);
        }
        #model-10 .card .f-card {
            transform-origin: 100% 100%;
        }
        #model-10 .card:hover .f-card {
            transform: rotate(180deg);
        }
        #model-11 .card {
            perspective: 500px;
        }
        #model-11 .card .f-card {
            transform-origin: 100% 100%;
        }
        #model-11 .card:hover .f-card {
            transform: rotate(180deg);
        }
        #model-12 .card {
            perspective: 500px;
            overflow: hidden;
        }
        #model-12 .card .f-card {
            transform-origin: 0 100%;
        }
        #model-12 .card:hover .f-card {
            transform: rotateX(120deg);
        }
        #model-13 .card:hover .f-card {
            transform: scale(0);
        }
        #model-14 .card {
            transform: rotateX(0deg);
            transform-origin: 0 0;
            transition: all 0.5s;
            transform-style: preserve-3d;
        }
        #model-14 .card .b-card {
            transform: rotateX(-90deg);
            transform-origin: 0 0;
            transition: all 0.5s;
        }
        #model-14 .card:hover {
            transform: rotateX(90deg);
        }
        #model-15 .card {
            transform: rotateY(0deg);
            transform-origin: 0 0;
            transition: all 0.5s;
            transform-style: preserve-3d;
        }
        #model-15 .card .b-card {
            transform: rotateY(-90deg);
            transform-origin: 0 0;
            transition: all 0.5s;
        }
        #model-15 .card:hover {
            transform: rotateY(90deg);
        }
        #model-16 .card {
            transform: rotateY(0deg);
            transition: all 0.5s;
        }
        #model-16 .card:hover {
            transform: rotateY(180deg);
        }
        #model-17 .card {
            transform: rotateX(0deg);
            transition: all 0.5s;
        }
        #model-17 .card:hover {
            transform: rotateX(180deg);
        }
        #model-18 .card:hover .f-card{
            opacity: 0;
        }
        #model-19 .card .f-card{
            transition: all 0.5s;
        }
        #model-19 .card:hover .f-card{
            display: none;
        }
    </style>
</head>
<body>
    <div class="col" id="model-1">
        <div class="card">
            <div class="f-card icon">fingerprint1</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-2">
        <div class="card">
            <div class="f-card icon">fingerprint2</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-3">
        <div class="card">
            <div class="f-card icon">fingerprint3</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-4">
        <div class="card">
            <div class="f-card icon">fingerprint4</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-5">
        <div class="card">
            <div class="f-card icon">fingerprint5</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-6">
        <div class="card">
            <div class="f-card icon">fingerprint6</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-7">
        <div class="card">
            <div class="f-card icon">fingerprint7</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-8">
        <div class="card">
            <div class="f-card icon">fingerprint8</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-9">
        <div class="card">
            <div class="f-card icon">fingerprint9</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-10">
        <div class="card">
            <div class="f-card icon">fingerprint10</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>    
    <div class="col" id="model-11">
        <div class="card">
            <div class="f-card icon">fingerprint11</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-12">
        <div class="card">
            <div class="f-card icon">fingerprint12</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-13">
        <div class="card">
            <div class="f-card icon">fingerprint13</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-14">
        <div class="card">
            <div class="f-card icon">fingerprint14</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-15">
        <div class="card">
            <div class="f-card icon">fingerprint15</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-16">
        <div class="card">
            <div class="f-card icon">fingerprint16</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-17">
        <div class="card">
            <div class="f-card icon">fingerprint17</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-18">
        <div class="card">
            <div class="f-card icon">fingerprint18</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
    <div class="col" id="model-19">
        <div class="card">
            <div class="f-card icon">fingerprint19</div>
            <div class="b-card icon">favorite</div>
        </div>
    </div>
</body>
</html>

0123
넘겨서 보세요 !

 

전체 페이지 캡쳐

 

 

 

<transition 응용 예제>

 

- HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../1101/style.css">
    <title>transition</title>
</head>
<body>
    <div class="cotainer">
        <h1>Pure CSS 2Depth Menu</h1>
        <nav>
            <ul>
                <li><a href="#">HTML</a>
                    <ul>
                        <li><a href="#">HTML Forms</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li><a href="#">HTML Graphics</a></li>
                        <li><a href="#">HTML Media</a></li>
                        <li><a href="#">HTML APIs</a></li>
                        <li><a href="#">HTML Examples</a></li>
                        <li><a href="#">HTML References</a></li>
                    </ul>
                </li>
                <li><a href="#">CSS</a>
                    <ul>
                        <li><a href="#">CSS3</a></li>
                        <li><a href="#">CSS Resonsive</a></li>
                        <li><a href="#">CSS Exampless</a></li>
                        <li><a href="#">CSS References</a></li>
                    </ul>
                </li>
                <li><a href="#">JAVASCRIPT</a>
                    <ul>
                        <li><a href="#">JS Forms</a></li>
                        <li><a href="#">JS Objects</a></li>
                        <li><a href="#">JS Functions</a></li>
                        <li><a href="#">JS HTML DOM</a></li>
                        <li><a href="#">JS Examples</a></li>
                        <li><a href="#">JS References</a></li>
                    </ul>
                </li>
                <li><a href="#">JQUERY</a>
                    <ul>
                        <li><a href="#">jQuery Effects</a></li>
                        <li><a href="#">jQuery HTML</a></li>
                        <li><a href="#">jQuery Traversing</a></li>
                        <li><a href="#">jQuery AJAX</a></li>
                        <li><a href="#">jQuery Examples</a></li>
                        <li><a href="#">jQuery References</a></li>
                    </ul>
                </li>
                <li><a href="#">TUTORIAL</a>
                    <ul>
                        <li><a href="#">HTML/CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">Web</a></li>
                        <li><a href="#">XML</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div class="visual"><img src="../../images/photo6.jpg" alt=""></div>
    </div>
</body>
</html>

 

 

- CSS

@charset "utf-8";
@font-face {
    font-family: Opensans;
    src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff);
}
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
body {
    font: 1em Opensans;
    margin: 20px;
    padding: 20px;
    background: #f1f1f1;
}
.container {
    min-width: 500px;
}
h1 {
    padding-bottom: 20px;
}
nav > ul {
    background: #5f5f5f;
    height: 40px;
    display: flex;
}
nav > ul > li {
    line-height: 40px;
}
nav > ul > li > a {
    display: block;
    padding: 0 30px;
    text-align: center;
    color: #f5f5f5;
    transition: all 0.5s;
}
nav > ul > li:hover > a, nav > ul > li > a:hover {
    background: #8ac007;
    color: #fff;
}
nav li ul {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: all 0.5s;
}
nav li ul li a {
    display: block;
    padding: 0 30px;
    line-height: 35px;
}
nav > ul > li:hover ul {
    display: block;
}
nav li ul li a:hover {
    background: #ddd;
}

 

 

0

저 메뉴 바는 페이지의 창의 크기에 따라 늘어났다 줄어들었다 하는 구조로 되어있다.

 

 

 

 

- HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../1101/05style.css">
    <title>menu_transition</title>
</head>
<body>
    <div class="container">
        <div class="nav line">
            <a href="#">Html</a>
            <a href="#">CSS</a>
            <a href="#">Javascript</a>
            <a href="#">jQuery</a>
            <a href="#">Portfolio</a>
            <div class="effect"></div>
        </div>
        <div class="nav dot">
            <a href="#">Html</a>
            <a href="#">CSS</a>
            <a href="#">Javascript</a>
            <a href="#">jQuery</a>
            <a href="#">Portfolio</a>
            <div class="effect"></div>
        </div>
        <div class="nav box">
            <a href="#">Html</a>
            <a href="#">CSS</a>
            <a href="#">Javascript</a>
            <a href="#">jQuery</a>
            <a href="#">Portfolio</a>
            <div class="effect"></div>
        </div>
    </div>
</body>
</html>

 

 

- CSS

@charset "utf-8";
@font-face {
    font-family: Opensans;
    src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff);
}
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
body {
    font: 1em Opensans;
}
.nav {
    position: relative;
    width: 700px;
    text-align: center;
    border: 1px solid #000;
    overflow: hidden;
}
.nav a {
    position: relative;
    display: block;
    float: left;
    width: 20%;
    text-decoration: none;
    color: #000;
    padding: 20px 0 40px;
}
.nav a:hover {
    color: #8ac007;
}
.effect {
    position: absolute;
    /* width: 8px;
    height: 8px;
    border: 1px solid #000; */
    left: -25%;
    transition: all 1s;
}
.nav a:first-child:hover ~ .effect {
    left: 10%;
}
.nav a:nth-child(2):hover ~ .effect {
    left: 30%;
}
.nav a:nth-child(3):hover ~ .effect {
    left: 50%;
}
.nav a:nth-child(4):hover ~ .effect {
    left: 70%;
}
.nav a:nth-child(5):hover ~ .effect {
    left: 90%;
}
.line .effect {
    width: 70px;
    height: 3px;
    background: #8ac007;
    bottom: 30px;
    margin-left: -35px;
}
.dot::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #8ac007;
    bottom: 30px;   
}
.nav.dot a::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: #8ac007;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 28px;
}
.nav.dot .effect {
    width: 12px;
    height: 12px;
    background: #8ac007;
    border-radius: 50%;
    bottom: 25px;
}
.nav.box .effect, .nav.box a::after {
    background: url(../../images/target.png);
}
.nav.nav.box .effect {
    width: 8px;
    height: 8px;
    background-position: -26px 0;
    bottom: 25px;
    margin-left: -3px;
}
.nav.box a::after {
    position: absolute;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-position: -64px 0;
    left: 45%;
}

 

 

 

0
예제 완성

 

반응형

'Study > HTML5 & CSS3' 카테고리의 다른 글

HTML5 & CSS3 : transition 속성 응용 예제  (0) 2022.11.03
[DAY 66] HTML5 & CSS3 : transition 속성 응용  (1) 2022.11.02
HTML5 & CSS3 : text-spacing, transform, perspective 속성  (0) 2022.10.31
HTML5 & CSS3 : Paul Smith 메인 페이지 만들기  (0) 2022.10.28
HTML5 & CSS3 : input 태그 속성 응용  (0) 2022.10.27

관련글

댓글 1

티스토리툴바