CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS background 속성 CSS3 animation-timing-function 속성

CSS3 backface-visibility 属性使用方法及示例

CSS3的backface-visibility属性确定被转换元素的“背面”在面对用户时是否可见。

下表总结了此属性的用法上下文和版本历史记录。

默认值：	visible
适用于：	可变形元素
继承：	没有
可动画制作：	否。请参见动画属性。
版本：	CSS3的新功能
JavaScript语法:	object.style.backfaceVisibility="hidden"

backface-visibility的使用语法

该属性的语法如下：

backface-visibility: visible | hidden | initial | inherit

下面的示例演示了如何使用backface-visibility 속성.

예제

.flip-container {
　　　　　　　　margin:　50px;
　　　　　　　　perspective:　1000px;
　　　　　　　　display: inline-block;
　　　　}
　　　　.flip-container:hover .card {
　　　　　　　　transform: rotateY(180deg);
　　　　}
　　　　.card, .front, .back {
　　　　　　　　width:　130px;
　　　　　　　　height:　195px;
　　　　}
　　　　.card {
　　　　　　　　position: relative;
　　　　　　　　transition: 0.5s all;
　　　　　　　　transform-style: preserve-3d;
　　　　}
　　　　.front, .back {
　　　　　　　　position: absolute;
　　　　　　　　backface-visibility: hidden;
　　　　}
　　　　.front {
　　　　　　　　z-index:　1;
　　　　　　　　transform: rotateY(180deg);
　　　　}
　　　　.back {
　　　　　　　　z-index:　2;
　　　　　　　　transform: rotateY(0deg);
　　　　}

테스트해 보세요‹/›

주의:backface-visibility 속성은 회전硬화나 카드 뒤집기와 같은 애니메이션을 만들 때 매우 유용합니다. 이는 두 가지 다른 이미지(즉, 앞면과 뒷면)을 혼합하여 더 나은 효과를 만듭니다.3D 회전 효과.

속성 값

다음 표는 이 속성의 값을 설명합니다。

값	설명
visible	뒷면을 보이게 하고 앞면의 미러 이미지를 표시합니다. 기본 값입니다.
hidden	뒷면을 보이지 않게 하고 앞면을 숨깁니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 backface를 사용합니다.-visibility 속성의 계산 값.

브라우저 호환성

backface-visibility 속성의 브라우저 호환성, 모든 주요 브라우저가 이 속성을 지원합니다.

	파이어폭스 10+ ^-moz-，16 + 구글 크롬 12+ ^-webkit-，36+ 인터넷 익스플로러 10+ 애플 사파리 4+ ^-webkit- 오페라 15+ ^-o-，23+ ^-webkit-

더 읽기

다음 튜토리얼을 참조하세요：CSS3이동，CSS3 3D 변환，CSS3애니메이션。

관련 속성：perspective，perspective-origin，transform，transform-origin，transform-style，transition。

CSS background 속성 CSS3 animation-timing-function 속성