• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 HTML/CSS 게시판 CSS 3D Animation 뒷멸 글씨 안보이게 하는게 적용이 안됩니다

CSS 3D Animation 뒷멸 글씨 안보이게 하는게 적용이 안됩니다

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 글쓴이
  • #33058

    Heok Joon
    참가자

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <style>
    .flip-outer{ width: 300px; height: 300px}
    .flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: all 1s;
    transform-style<strong>: preserve-3d !important;</strong>
    }
    .flip-inner:hover { transform: rotateY(180deg)}

    .front{ width: 100%; position: absolute; backface-visibility: hidden}
    .back{ width: 100%; text-align: center; position: absolute; transform: rotateY(180deg)}
    </style>
    <body>
    <div class="flip-outer">
    <div class="flip-inner">

    <div class="back">
    <p>Jason</p>
    </div>
    </div>

    </div>
    </body>
    </html>

     

    볼드체 부분이 아무리 적용을 시켜도 안되네요 무슨 문제일까요 ?

    #33059

    Heok Joon
    참가자

    : preserve-3d !important; 이부분입니다 

    #33070

    codingapple
    키 마스터

    .front에 z-index도 추가해봅시다 

3 글 보임 - 1 에서 3 까지 (총 3 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠