❏ css - transition 변환 속성으로 응용하기

안녕하세요!

 

이번 포트폴리오를 준비하면서 transition 변환 속성의 3차원 함수를 응용하여 만든 효과를 포스팅해보겠습니다.

 

transition 변환 속성은 전에 포스팅한 글을 먼저 읽어주시면 이해하시기 쉽습니다!

 

👇👇👇 글 바로가기 👇👇👇

https://y-seon97.tistory.com/21

css 변환 transform(1) 2차원,3차원 변환함수

---

이렇게 transition 변환 속성의 3d함수를 사용하여 만든 뉴스 섹션입니다.

 

마우스를 해당  이미지 영역에 hover시 카드가 뒤집혀 뒤의 뉴스기사가 보이도록 구현해보았든데요!

 

그럼 천천히 알아보겠습니다!

 

---

✎ html

           <div class="news1"> <!--뉴스카드부분입니다.-->
                <div class="news_01">
                    <div class="front"></div>
                    <div class="back">
                        <p>[패션] eco 폴리스</p>
                        <p style="text-align: start;">올해 가을·겨울 (21 FW) 시즌에 폐플라스틱으로 만든 재활용 소재의 다운 자켓, 플리스 등 의류 제품인 'eco 폴리스'를 연달아 출시하였습니다.</p>
                        <p>2022.11.01</p>
                        <p class="p1">자세히 보기 ></p>
                    </div>
                </div>
            </div>
            <!--카드를 늘리고 싶은 수 만큼 복붙하시면 됩니다.-->

 

✎ css

/*뉴스 뒤집기 효과*/
/*1번*/
.container_5 .news1{
    width: 200px;
    height: 200px;
    perspective: 1100px;
    /*부모영역에 원근감을 넣지않으면 구동되지 않습니다.*/
}

.container_5 .news1 .news_01{
    width: 100%;
    height: 100%;
    position: relative;
    transition: .4s;
    transform-style: preserve-3d;
}

.container_5 .news1 .news_01 .front{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; 
    /*앞면과 뒷면이 동시에 출력되면 안되니 뒷면은 가립니다.*/
}

.container_5 .news1 .news_01 .back{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    box-shadow: 2px 2px 2px gray;
}

.container_5 .news1 .news_01 .front{
    background: url(../img/news_01.jpg) center center no-repeat;
    background-size: contain;
    box-shadow: 2px 2px 2px gray;
}

.container_5 .news1 .news_01 .back{
    background-color: rgba(219, 146, 44, 0.839);
    transform: rotateY(180deg);
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding: 10px;
}

.container_5 .news1 .news_01 .back >p{
    font-size: 13px;
    color: rgb(255, 255, 255);
    text-align: center;
}

.container_5 .news1 .news_01 .back .p1{
    border: 1px solid rgb(255, 255, 255);
    padding: 6px;
    border-radius: 10px;
}

.container_5 .news1:hover .news_01{
    transform: rotateY(180deg); 
    /*180도를 돌려야지 뒷면이 보이겠죠??*/
}

---

변환속성과 3차원 함수에 대한 이해만 있으시다면 손 쉽게 만들어 볼 수 있는 애니메이션 속성입니다.

 

그렇게 어렵지 않으니 한번들 사용해보세요!

 

˙ ͜ʟ˙