본문 바로가기

Webstoryboy

Category

Explanation

CSS/Alphabet

backface-visibility

backface-visibility

backface-visibility 속성은 요소의 뒷면을 설정합니다. 요소가 3D인 경우에서 설정 할 수 있습니다.


backface-visibility

backface-visibility 속성은 요소의 뒷면을 설정합니다.

특징 설명
기본 값 backface-visibility : visible;
버전 CSS3
사용성 ★★★☆☆

정의(Definition)

  • backface-visibility 속성은 요소의 뒷면을 설정합니다.
  • 2D 상태에서는 뒷면을 확인할 수 없지만 3D 공간에서는 뒷면을 확인 할 수 있습니다.

문법(Syntax)

backface-visibility : visible | hidden;

/* 기본 속성 */
backface-visibility : visible;
backface-visibility : hidden;

속성(Property)

속성값 설명
visible 요소의 뒷면을 보이도록 설정합니다.
hidden 요소의 뒷면을 보이지 않도록 설정합니다.

예제1(Sample)

마우스 오버하면 뒷면을 볼 수 있는 예제입니다.
샘플이미지

backface-visibility: visibile;

마우스 오버하면 효과를 확인할 수 있습니다.
HTML
CSS
SCRIPT
<div class="card-wrap">
    <div class="card hidden">
        <img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover11.jpg" alt="샘플이미지">
        <h3>backface-visibility: hidden;</h3>
    </div>
    <div class="card">
        <img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover11.jpg" alt="샘플이미지">
        <h3>backface-visibility: visibile;</h3>
    </div>
</div>
.card-wrap {
    display: flex;
    align-items: center;    
    justify-content: center;
    height: 300px;
    perspective: 1000px;
}
.card-wrap .card {
    position: relative;
    padding: 20px;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.card-wrap .card.hidden {
    backface-visibility: hidden;
}
.card-wrap .card img {
    max-width: 300px;
    border: 7px solid #7485bf;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.card-wrap .card:hover {
    transform: rotateY(180deg);
}
.card-wrap .card h3 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    color: #fff;
}
//Javascript none

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
backface-visibility

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기