Front/CSS

[CSS3] CSS λ³€ν™˜

ddo04 2024. 7. 3. 17:13

πŸ“•β€Š λ³€ν™˜μ΄λž€?

  • ν”ŒλŸ¬κ·ΈμΈμ˜ 도움 없이 μ›Ή λΈŒλΌμš°μ €μ— 3차원 곡간을 κ΅¬ν˜„ν•  수 있게 λ˜μ—ˆμŒ
  • HTML5μ—μ„œ 3차원을 κ΅¬ν˜„ν•˜λŠ” 방법은 크게 2가지
  1. μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ‚¬μš©ν•œ webGL
  2. CSS3λ₯Ό μ‚¬μš©ν•œ 3차원 λ°°μ—΄

πŸ“•β€Š 2차원 λ°°μ—΄

  • λŒ€λΆ€λΆ„μ˜ 컴퓨터 ν”„λ‘œκ·Έλž¨μ€ ν™”λ©΄ μ’Œν‘œλ₯Ό 이용
  • XμΆ•κ³Ό Y좕이 μžˆλŠ” ν™”λ©΄ μ’Œν‘œλ₯Ό 2차원 ν™”λ©΄ μ’Œν‘œλΌκ³  뢀름
  • Z좕을 μΆ”κ°€ν•˜λ©΄ 3차원 ν™”λ©΄ μ’Œν‘œλ‘œ ν™•μž₯
  • 3차원 ν™”λ©΄ μ’Œν‘œμ—μ„œ Z좕은 μ›Ή λΈŒλΌμš°μ €λ₯Ό λ³΄λŠ” μ‚¬μš©μžμ—κ²Œ κ°€κΉŒμšΈμˆ˜λ‘ 큰 κ°’μž„

πŸ“•β€Š transform 속성

  • CSS3λΆ€ν„°λŠ” transform 속성을 μ‚¬μš©ν•΄ 객체λ₯Ό λ³€ν™˜ν•  수 있음
  • λ³€ν™˜μ΄ κ°€λŠ₯ν•œ μ΄μ•ΌκΈ°λŠ” HTML νŽ˜μ΄μ§€ 슀슀둜 μ• λ‹ˆλ©”μ΄μ…˜ 같은 ν”Œλž˜μ‹œ μ½˜ν…μΈ λ₯Ό λ§Œλ“€ 수 있음
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        section {
            width: 100px; height: 100px;
            border: 5px solid black;
        }
        div{
            width: 100px; height: 100px;
            background-color: red;

            transform: rotate(60deg);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>    
</body>
</html>

  • μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ μ‚¬κ°ν˜•μ΄ 60도 νšŒμ „

πŸ“•β€Š 2차원 λ³€ν™˜ ν•¨μˆ˜ 

  • ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ—μ„œλŠ” μ‹λ³„μž 뒀에 κ΄„ν˜Έκ°€ μžˆμ„ 경우 ν•΄λ‹Ή μ‹λ³„μžλ₯Ό ν•¨μˆ˜λΌκ³  뢀름
  • transform 속성 μ•ˆμ— ν•¨μˆ˜ μ‚¬μš©
translate(transiateX, translateY νŠΉμ • 크기만큼 이동
translateX(translateX) xμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 이동
translateY(translateY) yμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 이동
scale(scaleX, scaleY) νŠΉμ • 크기만큼 ν™•λŒ€ 및 μΆ•μ†Œ
scaleX(scaleX) xμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 ν™•λŒ€ 및 μΆ•μ†Œ
scaleY(scaleY) yμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 ν™•λŒ€ 및 μΆ•μ†Œ
skew(angleX, angleY) νŠΉμ • κ°λ„λ§ŒνΌ κΈ°μšΈμž„
skewX(angleX) xμΆ•μœΌλ‘œ νŠΉμ • κ°λ„λ§ŒνΌ κΈ°μšΈμž„
skewY(angleY) yμΆ•μœΌλ‘œ νŠΉμ • κ°λ„λ§ŒνΌ κΈ°μšΈμž„
rotate(angleZ) νŠΉμ • κ°λ„λ§ŒνΌ νšŒμ „
  • transform 속성에 각각의 ν•¨μˆ˜λ₯Ό 곡백으둜 ꡬ뢄해 μž…λ ₯ν•˜λ©΄λ¨

πŸ“•β€Š transform-origin 속성

    • λ³€ν™˜ 쀑심을 μ„€μ •ν•˜λŠ” μŠ€νƒ€μΌ 속성
    • νƒœκ·Έ μ˜μ—­μ˜ 쀑심을 λ³€ν™˜ μ€‘μ‹¬μœΌλ‘œ 작음
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        section {
            width: 100px;
            height: 100px;
            border: 5px solid black;
        }
        div{
            width: 100px; height: 100px;
            background-color: red;

            transform: rotate(60deg);
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>    
</body>
</html>

  • rotate() λ³€ν™˜ ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ˜€μœΌλ―€λ‘œ μ‚¬κ°ν˜•μ΄ 60도 νšŒμ „
  • μ‚¬κ°ν˜•μ˜ 쀑심을 κΈ°μ€€μœΌλ‘œ νšŒμ „
  • λ³€ν™˜ 쀑심을 λ³€κ²½ν•  λ•Œ transform-origin 속성 μ‚¬μš©
  • 2개의 크기 λ‹¨μœ„ 적용 κ°€λŠ₯
  • 각각 λ³€ν™˜ μ€‘μ‹¬μ˜ Xμ’Œν‘œμ™€ Yμ’Œν‘œ 의미
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        section {
            width: 100px;
            height: 100px;
            border: 5px solid black;
        }
        div{
            width: 100px; height: 100px;
            background-color: red;

            transform: rotate(60deg);
            transform-origin: 100% 100%;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>    
</body>
</html>

πŸ“•β€Š 3차원 λ³€ν™˜ ν•¨μˆ˜

translate(translateX, translateY, translateZ) νŠΉμ • 크기만큼 이동 rotateY(angleY) yμΆ•μœΌλ‘œ νŠΉμ • κ°λ„λ§ŒνΌ νšŒμ „
translateX(translateX) xμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 이동 rotateZ(angleZ) zμΆ•μœΌλ‘œ νŠΉμ • κ°λ„λ§ŒνΌ νšŒμ „
translateY(translateY) yμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 이동    
translateZ(translateZ) zμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 이동    
scale3d(scaleX, scaleY, scaleZ) νŠΉμ • 크기만큼 ν™•λŒ€ 및 μΆ•μ†Œ    
scaleX(scaleX) xμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 ν™•λŒ€ 및 μΆ•μ†Œ    
scaleY(scaleY) yμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 ν™•λŒ€ 및 μΆ•μ†Œ    
scaleZ(scaleZ) zμΆ•μœΌλ‘œ νŠΉμ • 크기만큼 ν™•λŒ€ 및 μΆ•μ†Œ    
rotate3d(angleX, angleY, angleZ) νŠΉμ • κ°λ„λ§ŒνΌ νšŒμ „    
rotateX(angleX) xμΆ•μœΌλ‘œ νŠΉμ • κ°λ„λ§ŒνΌ νšŒμ „    
  • section νƒœκ·Έλ‘œ 감싸 ν•˜λ‚˜μ˜ 객체처럼 λ§Œλ“¬
  • div νƒœκ·Έμ˜ position 속성에 absolute ν‚€μ›Œλ“œλ₯Ό μ μš©ν•˜κ³  left 속성과 top 속성을 μ‚¬μš©ν•΄ ν•˜λ‚˜λ‘œ λ­‰μΉ¨
  • 각각의 νƒœκ·Έλ₯Ό μ λ‹Ήν•œ κ°λ„λ‘œ νšŒμ „μ‹œν‚€κ³  μ™Έκ³½μœΌλ‘œ 밀어버림
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        body {
            width: 200px;
            margin: 200px auto;
        }
        section {
            width: 200px; height: 200px;
            position: relative;
        }
        div {
            width: 200px; height: 200px;
            position: absolute; left: 0; top: 0;
            opacity: 0.3;
        }
        /* μ˜†λ©΄ */
        div:nth-child(1) {transform: rotate(0deg) translate3d(0px, 0px, 100px);}
        div:nth-child(2) {transform: rotate(90deg) translate3d(0px, 0px, 100px);}
        div:nth-child(3) {transform: rotate(180deg) translate3d(0px, 0px, 100px);}
        div:nth-child(4) {transform: rotate(270deg) translate3d(0px, 0px, 100px);}
        /* μœ—λ©΄κ³Ό μ•„λž«λ©΄ */
        div:nth-child(5) {transform: rotate(90deg) translate3d(0px, 0px, 100px);}
        div:nth-child(6) {transform: rotate(270deg) translate3d(0px, 0px, 100px);}
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>    
</body>
</html>
  • 각각의 div νƒœκ·Έμ— 색상 μž…λ ₯
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        body {
            width: 200px;
            margin: 200px auto;
        }
        section {
            width: 200px; height: 200px;
            position: relative;
        }
        div {
            width: 200px; height: 200px;
            position: absolute; left: 0; top: 0;
            opacity: 0.3;
        }
        /* μ˜†λ©΄ */
        div:nth-child(1) {
            transform: rotateY(0deg) translate3d(0px, 0px, 100px);
            background: red;
        }
        div:nth-child(2) {
            transform: rotateY(90deg) translate3d(0px, 0px, 100px);
            background: green;
        }
        div:nth-child(3) {
            transform: rotateY(180deg) translate3d(0px, 0px, 100px);
            background: blue;
        }
        div:nth-child(4) {
            transform: rotateY(270deg) translate3d(0px, 0px, 100px);
            background: yellow;
        }
        /* μœ—λ©΄κ³Ό μ•„λž«λ©΄ */
        div:nth-child(5) {
            transform: rotateX(90deg) translate3d(0px, 0px, 100px);
            background: brown;
        }
        div:nth-child(6) {
            transform: rotateX(270deg) translate3d(0px, 0px, 100px);
            background: pink;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>    
</body>
</html>

πŸ“•β€Š  transform-style 속성

  • λ³€ν™˜μ„ μ μš©ν•  λ•Œ κ·Έ 영ν–₯λ ₯이 μžμ‹ μ—κ²Œλ§Œ μ μš©λ μ§€ μžμ†μ—κ²Œλ„ 적용될 지 μ •ν•˜λŠ” 속성
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        body {
            width: 200px;
            margin: 200px auto;
        }
        section {
            width: 200px; height: 200px;
            position: relative;
            animation: rint 3s linear 0s infinite;
        }
        @keyframes rint{
            from{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
        div {
            width: 200px; height: 200px;
            position: absolute; left: 0; top: 0;
            opacity: 0.3;
        }
        /* μ˜†λ©΄ */
        div:nth-child(1) {
            transform: rotateY(0deg) translate3d(0px, 0px, 100px);
            background: red;
        }
        div:nth-child(2) {
            transform: rotateY(90deg) translate3d(0px, 0px, 100px);
            background: green;
        }
        div:nth-child(3) {
            transform: rotateY(180deg) translate3d(0px, 0px, 100px);
            background: blue;
        }
        div:nth-child(4) {
            transform: rotateY(270deg) translate3d(0px, 0px, 100px);
            background: yellow;
        }
        /* μœ—λ©΄κ³Ό μ•„λž«λ©΄ */
        div:nth-child(5) {
            transform: rotateX(90deg) translate3d(0px, 0px, 100px);
            background: brown;
        }
        div:nth-child(6) {
            transform: rotateX(270deg) translate3d(0px, 0px, 100px);
            background: pink;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>    
</body>
</html>
  • μ •μœ‘λ©΄μ²΄λ₯Ό λ‹΄κ³  μžˆλŠ” 틀이 μ›€μ§μ΄λ―€λ‘œ μ •μœ‘λ©΄μ²΄κ°€ 움직일 것이라고 κΈ°λŒ€ν•  수 μžˆμ§€λ§Œ 평면이 νšŒμ „
  • μžμ†μ˜ 3차원 속성을 μœ μ§€ν•œ μ±„λ‘œ λΆ€λͺ¨λ₯Ό νšŒμ „μ‹œν‚€κ³  싢을 λ•ŒλŠ” λΆ€λͺ¨μ˜ transform-style 속성에 preserve-3d ν‚€μ›Œλ“œ 적용
  • section νƒœκ·Έμ˜ trandform-style 속성에 preserve-3d ν‚€μ›Œλ“œλ₯Ό 적용
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        body {
            width: 200px;
            margin: 200px auto;
        }
        section {
            width: 200px; height: 200px;
            position: relative;
            animation: rint 3s linear 0s infinite;

            transform-style: preserve-3d;
        }
        @keyframes rint{
            from{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
        div {
            width: 200px; height: 200px;
            position: absolute; left: 0; top: 0;
            opacity: 0.3;
        }
        /* μ˜†λ©΄ */
        div:nth-child(1) {
            transform: rotateY(0deg) translate3d(0px, 0px, 100px);
            background: red;
        }
        div:nth-child(2) {
            transform: rotateY(90deg) translate3d(0px, 0px, 100px);
            background: green;
        }
        div:nth-child(3) {
            transform: rotateY(180deg) translate3d(0px, 0px, 100px);
            background: blue;
        }
        div:nth-child(4) {
            transform: rotateY(270deg) translate3d(0px, 0px, 100px);
            background: yellow;
        }
        /* μœ—λ©΄κ³Ό μ•„λž«λ©΄ */
        div:nth-child(5) {
            transform: rotateX(90deg) translate3d(0px, 0px, 100px);
            background: brown;
        }
        div:nth-child(6) {
            transform: rotateX(270deg) translate3d(0px, 0px, 100px);
            background: pink;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>    
</body>
</html>
  • μ •μœ‘λ©΄μ²΄κ°€ νšŒμ „
  • transform-style μ†μ„±μ—λŠ” 이와 같은 ν‚€μ›Œλ“œ μ‚¬μš©
flat ν›„μ†μ˜ 3차원 속성 λ¬΄μ‹œ
preserve-3d ν›„μ†μ˜ 3차원 속성 μœ μ§€

πŸ“•β€Š  backface-visibility 속성

  • 3차원 κ³΅κ°„μ—μ„œ ν‰λ©΄μ˜ 후면을 λ³΄μ΄κ±°λ‚˜ 보이지 μ•Šκ²Œ λ§Œλ“œλŠ” μŠ€νƒ€μΌ 속성
  • div νƒœκ·Έμ— backface-visibility 속성에 hidden ν‚€μ›Œλ“œ 적용
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        body {
            width: 200px;
            margin: 200px auto;
        }
        section {
            width: 200px; height: 200px;
            position: relative;
            animation: rint 3s linear 0s infinite;

            transform-style: preserve-3d;
        }
        @keyframes rint{
            from{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
        div {
            width: 200px; height: 200px;
            position: absolute; left: 0; top: 0;
            
            backface-visibility: hidden;
            opacity: 0.3;
        }
        /* μ˜†λ©΄ */
        div:nth-child(1) {
            transform: rotateY(0deg) translate3d(0px, 0px, 100px);
            background: red;
        }
        div:nth-child(2) {
            transform: rotateY(90deg) translate3d(0px, 0px, 100px);
            background: green;
        }
        div:nth-child(3) {
            transform: rotateY(180deg) translate3d(0px, 0px, 100px);
            background: blue;
        }
        div:nth-child(4) {
            transform: rotateY(270deg) translate3d(0px, 0px, 100px);
            background: yellow;
        }
        /* μœ—λ©΄κ³Ό μ•„λž«λ©΄ */
        div:nth-child(5) {
            transform: rotateX(90deg) translate3d(0px, 0px, 100px);
            background: brown;
        }
        div:nth-child(6) {
            transform: rotateX(270deg) translate3d(0px, 0px, 100px);
            background: pink;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>    
</body>
</html>
  • ν‰λ©΄μ˜ 후면이 사라진 것을 확인할 수 있음
  • 이와 같은 ν‚€μ›Œλ“œ μ‚¬μš©
visible 후면을 보이게 λ§Œλ“¬
hidden 후면을 보이지 μ•Šκ²Œ λ§Œλ“¬

πŸ“•β€Š  원근법

  • perspective 속성은 원근법을 μ§€μ •ν•˜λŠ” 속성
  • perspective 속성은 화면에 μ–Όλ§ˆλ‚˜ λ§Žμ€ 3차원 픽셀을 놓을 것인지 μ •μ˜ν•˜λŠ” 속성
  • perspective μ†μ„±μ—λŠ” 400ν”½μ…€μ—μ„œ 2000ν”½μ…€ μ‚¬μ΄μ˜ 숫자 μž…λ ₯
  • body νƒœκ·Έμ— perspective 속성값 400 적용
<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        body {
            width: 200px;
            margin: 200px auto;
            -webkit-perspective: 400;
        }
        section {
            width: 200px; height: 200px;
            position: relative;
            animation: rint 3s linear 0s infinite;

            transform-style: preserve-3d;
        }
        @keyframes rint{
            from{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
        div {
            width: 200px; height: 200px;
            position: absolute; left: 0; top: 0;
            
            backface-visibility: hidden;
            opacity: 0.3;
        }
        /* μ˜†λ©΄ */
        div:nth-child(1) {
            transform: rotateY(0deg) translate3d(0px, 0px, 100px);
            background: red;
        }
        div:nth-child(2) {
            transform: rotateY(90deg) translate3d(0px, 0px, 100px);
            background: green;
        }
        div:nth-child(3) {
            transform: rotateY(180deg) translate3d(0px, 0px, 100px);
            background: blue;
        }
        div:nth-child(4) {
            transform: rotateY(270deg) translate3d(0px, 0px, 100px);
            background: yellow;
        }
        /* μœ—λ©΄κ³Ό μ•„λž«λ©΄ */
        div:nth-child(5) {
            transform: rotateX(90deg) translate3d(0px, 0px, 100px);
            background: brown;
        }
        div:nth-child(6) {
            transform: rotateX(270deg) translate3d(0px, 0px, 100px);
            background: pink;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>    
</body>
</html>
  • μ •μœ‘λ©΄μ²΄κ°€ νšŒμ „
  • μž…μ²΄κ°μ΄ λŠκ»΄μ§€λŠ” μ •μœ‘λ©΄μ²΄κ°€ 됨

πŸ“•β€Š  νšŒμ „λͺ©λ§ˆ - body νƒœκ·Έ ꡬ성

  • κ°„λ‹¨ν•œ μ†Œκ°œ νŽ˜μ΄μ§€μ™€ νšŒμ „ λͺ©λ§ˆλ₯Ό μ˜¬λ €λ‘˜ div νƒœκ·Έλ₯Ό λ§Œλ“€κ³  id μ†μ„±κ°’μœΌλ‘œ canvas에 μž…λ ₯
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <h1>HTML5 + CSS3 for Modern Web</h1>
    <h2>CSS transform</h2>
    <p>3D Merry Go Round Gallery</p>
    <hr/>
    <div id="canvas">
        
    </div>    
</body>
</html>
  • νšŒμ „ λͺ©λ§ˆ μ—΄ 생성
  • νšŒμ „ λͺ©λ§ˆμ˜ μˆ˜λŠ” 10개
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <h1>HTML5 + CSS3 for Modern Web</h1>
    <h2>CSS transform</h2>
    <p>3D Merry Go Round Gallery</p>
    <hr/>
    <div id="canvas">
        <div id="merry">
            <div class="face"></div>
            <div class="face"></div>
            <div class="face"></div>
            <div class="face"></div>
            <div class="face"></div>
            <div class="face"></div>
            <div class="face"></div>
            <div class="face"></div>
            <div class="face"></div>
            <div class="face"></div>
        </div>
    </div>    
</body>
</html>
  • #canvas νƒœκ·ΈλŠ” 단지 νšŒμ „ λͺ©λ§ˆ 객체λ₯Ό μ λ‹Ήν•œ μœ„μΉ˜μ— 놓기 μœ„ν•΄ λ§Œλ“  νƒœκ·Έ
  • #merry νƒœκ·ΈλŠ” νšŒμ „ λͺ©λ§ˆ 객체 의미
  • λ‚΄λΆ€μ˜ 열에 각각의 셀을 μž…λ ₯
  • class μ†μ„±κ°’μœΌλ‘œ faceλ₯Ό λΆ€μ—¬ν•œ div νƒœκ·Έμ— div νƒœκ·Έλ₯Ό 4κ°œμ”© 놓고 class μ†μ„±κ°’μœΌλ‘œ cell μž…λ ₯
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <h1>HTML5 + CSS3 for Modern Web</h1>
    <h2>CSS transform</h2>
    <p>3D Merry Go Round Gallery</p>
    <hr/>
    <div id="canvas">
        <div id="merry">
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
        </div>
    </div>    
</body>
</html>

πŸ“•β€Š  νšŒμ „λͺ©λ§ˆ - μŠ€νƒ€μΌ μ‚¬μš©

  • λͺ¨λ“  μŠ€νƒ€μΌ μ‚¬μš©μ˜ μ‹œμž‘μ€ μ΄ˆκΈ°ν™”
  • λͺ¨λ“  νƒœκ·Έμ˜ margin 속성과 padding 속성을 μ΄ˆκΈ°ν™”ν•˜κ³  html νƒœκ·Έμ™€ body νƒœκ·Έμ˜ height 속성도 μ΄ˆκΈ°ν™”
  • νšŒμ „ λͺ©λ§ˆ λ‚΄λΆ€μ˜ μ—΄κ³Ό μ…€μ˜ μœ„μΉ˜λ₯Ό μž‘μ•„λ΄„
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        * {margin: 0; padding: 0;}
        html, body {height: 100%;}
        body {
            width: 600px;
            margin: 0 auto;
        }
        #canvas {
            position: absolute;
            width: 100px; height: 200px;
            -webkit-perspective: 1500;
        }
        #merry {
            position: absolute;
            left: 50%; top: 50%;
            transform-style: preserve-3d;
        }
        .face {
            position: absolute;
            left: 0; top: 0;
            margin-left: -115px;

            backface-visibility: hidden;
            transform-style: preserve-3d;
        }
        .cell {
            width: 230px; height: 150px;
            margin-bottom: 5px;
            background: url('http://placehold.it/260x200');
            background-size: 100% 100%;

            transition-duration: 0.5s;
        }
        .face:nth-child(1) {transform: rotate(0deg) translateZ(-370px);}
        .face:nth-child(2) {transform: rotate(36deg) translateZ(-370px);}
        .face:nth-child(3) {transform: rotate(72deg) translateZ(-370px);}
        .face:nth-child(4) {transform: rotate(108deg) translateZ(-370px);}
        .face:nth-child(5) {transform: rotate(144deg) translateZ(-370px);}
        .face:nth-child(6) {transform: rotate(180deg) translateZ(-370px);}
        .face:nth-child(7) {transform: rotate(216deg) translateZ(-370px);}
        .face:nth-child(8) {transform: rotate(252deg) translateZ(-370px);}
        .face:nth-child(9) {transform: rotate(288deg) translateZ(-370px);}
        .face:nth-child(10) {transform: rotate(324deg) translateZ(-370px);}
        .cell:hover{
            transform: scale(1.2) translateZ(50px);
        }
    </style>
</head>
<body>
    <h1>HTML5 + CSS3 for Modern Web</h1>
    <h2>CSS transform</h2>
    <p>3D Merry Go Round Gallery</p>
    <hr/>
    <div id="canvas">
        <div id="merry">
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
        </div>
    </div>    
</body>
</html>

πŸ“•β€Š  νšŒμ „λͺ©λ§ˆ - μ• λ‹ˆλ©”μ΄μ…˜ 적용

  • νšŒμ „ λͺ©λ§ˆκ°€ νšŒμ „μ΄ κ°€λŠ₯ν•˜λ„λ‘ μ• λ‹ˆλ©”μ΄μ…˜ 적용
  • #merry μ„ νƒμžμ— animation 속성 μ‚¬μš©
  • μ• λ‹ˆλ©”μ΄μ…˜ 이름은 rint이고 15초 λ™μ•ˆ λ¬΄ν•œ 반볡
  • μ• λ‹ˆλ©”μ΄μ…˜ 이름에 rintλ₯Ό μž…λ ₯ν–ˆμœΌλ―€λ‘œ rint ν‚€ ν”„λ ˆμž„ 생성
  • ν‚€ ν”„λ ˆμž„μ„ μƒμ„±ν•˜μ—¬ 15초 λ™μ•ˆ ν•œ 바퀴λ₯Ό 돌게 λ§Œλ“¬
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        * {margin: 0; padding: 0;}
        html, body {height: 100%;}
        body {
            width: 600px;
            margin: 0 auto;
        }
        #canvas {
            position: relative;
            width: 100px; height: 200px;
            -webkit-perspective: 1500px;
        }
        #merry {
            position: absolute;
            left: 50%; top: 30%;

            transform-style: preserve-3d;
            animation: rint 15s infinite linear;
        }
        @keyframes rint{
            from {transform: rotate(0deg)}
            to{transform: rotate(360deg);}
        }
        .face {
            position: absolute;
            left: 0; top: 0;
            margin-left: -115px;

            backface-visibility: hidden;
            transform-style: preserve-3d;
        }
        .cell {
            width: 230px; height: 150px;
            margin-bottom: 5px;
            background: url('http://placehold.it/260x200');
            background-size: 100% 100%;

            transition-duration: 0.5s;
        }
        .face:nth-child(1) {transform: rotate(0deg) translateZ(-370px);}
        .face:nth-child(2) {transform: rotate(36deg) translateZ(-370px);}
        .face:nth-child(3) {transform: rotate(72deg) translateZ(-370px);}
        .face:nth-child(4) {transform: rotate(108deg) translateZ(-370px);}
        .face:nth-child(5) {transform: rotate(144deg) translateZ(-370px);}
        .face:nth-child(6) {transform: rotate(180deg) translateZ(-370px);}
        .face:nth-child(7) {transform: rotate(216deg) translateZ(-370px);}
        .face:nth-child(8) {transform: rotate(252deg) translateZ(-370px);}
        .face:nth-child(9) {transform: rotate(288deg) translateZ(-370px);}
        .face:nth-child(10) {transform: rotate(324deg) translateZ(-370px);}
        .cell:hover{
            transform: scale(1.2) translateZ(50px);
        }
    </style>
</head>
<body>
    <h1>HTML5 + CSS3 for Modern Web</h1>
    <h2>CSS transform</h2>
    <p>3D Merry Go Round Gallery</p>
    <hr/>
    <div id="canvas">
        <div id="merry">
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="face">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
        </div>
    </div>    
</body>
</html>