본문 바로가기
수업내용

20230712 3dTransform.html

by titlejjk 2023. 7. 12.

3D Transform을 배워보는 시간이다

 

물체와 나의 거리를 perspective라고 한다.

극단 적인 예..

 

perspective-orgin이란 예를 들어 뚜껑이 없는 상자의 바닥을 내려 보았을 때의 시점이라 생각하면 쉽다.

10% 90%가 적용된 모습이다.

 

 

transform-origin은 x축 y축 z축이 만나는 지점을 의미한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step04_3dTransform.html</title>
    <style>
        .wrapper{
            /*viewer와 object사이의 거리*/
            perspective: 500px;
            /*viewer의 x, y의 위치*/
            perspective-origin:50% 50%;
            border: 1px solid blue;
            height: 400px;
            padding-top: 100px;
        }
        .target{
            margin: 0 auto;
            width: 200px;
            border: 1px solid white;
            /**/
            transform-style: preserve-3d;
            /*x,y,z축이 교차하는 원점 설정*/
            transform-origin: 50% 50%;
            transition: transform 0.4s ease-out;
        }
        .target img{
            max-width: 100%;
        }
        #one:hover{
            transform: rotateX(45deg);
        }
        #two:hover{
            transform: rotateY(45deg);
        }
        #three:hover{
            transform: rotateZ(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>3d transform 테스트</h3>
        <!-- 3d 공간을 만들 wrapper div -->
        <div class="wrapper">
            <!-- 3d transform 을 할 아이템-->
            <div class="target" id="one">
                <img src="images/pepe.png"/>
            </div>
        </div>
        <div class="wrapper">
            <!-- 3d transform 을 할 아이템-->
            <div class="target" id="two">
                <img src="images/pepe1.png"/>
            </div>
        </div>
        <div class="wrapper">
            <!-- 3d transform 을 할 아이템-->
            <div class="target" id="three">
                <img src="images/pepe2.png"/>
            </div>
        </div>
    </div>
</body>
</html>

 

 

 

 

3D Transform을 통해서 정육면체 만들어보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step04_Cube.html</title>
    <style>
    .wrapper{
        perspective: 500px;
        perspective-origin: 50% 50%;
    }
    .cube{
        width: 400px;
        height: 400px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform-origin: 50% 50%;
        transform: translateZ(-200px);
    }
    .cube > div{
        border: 1px solid red;
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 100px;
        font-weight: bold;
        opacity: 0.5;
    }
    </style>
</head>
<body>
    <div class="container">
        <h3>3d cube 테스트</h3>
        <div class="wrapper">
            <div class="cube">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>    
            </div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step04_Cube.html</title>
    <style>
        .wrapper{
            perspective: 500px;
            perspective-origin: 50% 50%;
        }
        .cube{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform-origin: 50% 50%;
            transform: translateZ(-200px);
        }
        .cube > div{
            border: 1px solid red;
            position: absolute;
            top: 0;
            left: 0;
            width: 400px;
            height: 400px;
            background-color: antiquewhite;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
            font-weight: bold;
            opacity: 0.5;
        } 
        .cube > div:nth-child(1){
            transform: translateZ(200px);
        }
        .cube > div:nth-child(2){
            transform: rotateY(90deg) translateZ(200px);
        }
        .cube > div:nth-child(3){
            transform: rotateY(180deg) translateZ(200px);
        }
        .cube > div:nth-child(4){
            transform: rotateY(270deg) translateZ(200px);
        }
        .cube > div:nth-child(5){
            transform: rotateX(90deg) translateZ(200px);
        }
        .cube > div:nth-child(6){
            transform: rotateX(270deg) translateZ(200px);
        }

        .cube:hover{
            transition: transform 1s ease-in-out;
            transform: translateZ(-200px) rotateX(45deg) rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>3d cube 테스트</h3>
        <div class="wrapper">
            <div class="cube">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>    
            </div>
        </div>
    </div>    
</body>
</html>

 

위에 정육각형을 만든 코드인데 나름 주의할 점은

.cube > div:nth-child(n){
	transform: rotaeX(ndeg) translateZ(n px); 
}

코드 쪽에서 순서가 바뀌면 안된다.

각을 먼저 틀어주고 그 각인 상태에서 z축으로 이동하는 개념이기 때문에 코드의 순서도 중요하다.

'수업내용' 카테고리의 다른 글

Lombok 다운로드/설치/적용  (0) 2023.07.17
20230713 Cube2/Poligon  (0) 2023.07.13
20230711 SpringBoot Controller/JSP/MyBatis  (0) 2023.07.11
20230711 CSS3 Animate  (0) 2023.07.11
20230710 SpringBoot/Bean/AOP  (0) 2023.07.10

관련글

댓글

티스토리툴바