2012-12-23 2 views
0

three.js를 사용하여 3D 그림 테이블을 만들려고 노력하고 있지만 모두 정상적으로 작동합니다. 단 두 장의 사진을 연속으로 1 개로 만들 수는 있습니다. div :CSS : backface-visibility = hidden 대신 그림 대신

내 요소에는 배경이 있으며, 다른면에는 다른 그림이 있습니다.

가능합니까? 속성이 backface-visibility:hidden; 인 경우 배경이 잘못된쪽으로 사라질 수 있지만 사진을 "배경의 배경"으로 정의하는 방법은 무엇입니까?

.element { 
    width: 140px; 
    height: 180px; 
    box-shadow: 0px 0px 20px rgba(0,255,255,0.5); 
    border: 1px solid rgba(127,255,255,0.25); 
    cursor: default; 
    backface-visibility:hidden; 
    -webkit-backface-visibility:hidden; 
    -moz-backface-visibility:hidden; 
} 

... 

var element = document.createElement('div'); 
element.className = 'element'; 
element.style.backgroundImage="url('img/img-"+(i+1)+".jpg')"; 
element.style.backgroundRepeat = "no-repeat"; 
element.style.backgroundPosition = "center"; 

답변

0

뒷면에는 두 번째 요소가 필요합니다. 이것을 구현하는 방법에 대한 예제는 http://css3.bradshawenterprises.com/flip/을 참조하십시오 (예제 CSS3 애니메이션은 보너스라고 생각하십시오).

0

할 수 있습니다하지, 그 자체; backface-visibility: hidden;또 다른 요소를 그 뒤에 부가 회전이있는 보조 회전으로 만들 수 있습니다.