[transform] CSS - backface-visibility 속성 - 3D요소 뒷면노출 설정 - IE 10

backface-visibility 예제

 

<style>

div {

  position: relative;  

  width: 300px;

  height: 60px;

  line-height:60px;

  text-align:center;

  background-color: tomato;

  -webkit-transform: rotateY(180deg);  /* Chrome, Safari, Opera */

  transform: rotateY(180deg);

}

#hz1 {

  -webkit-backface-visibility: hidden;  /* Chrome, Safari, Opera */

  backface-visibility: hidden;

}

#hz2 {

  -webkit-backface-visibility: visible;  /* Chrome, Safari, Opera */

  backface-visibility: visible;

}

</style>

<div id="hz1">hz1 : 홈짱닷컴 Homzzang.com</div>

<div id="hz2">hz2 : 홈짱닷컴 Homzzang.com</div>

 

결과보기