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: hidden;

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	7	8	9	10	11
backface-visibility	○	○	○	○	○	❌	❌	❌	❌	○	○	○	○	○

참고 사이트(Reference)

• MDN
• 이미지

---