3D에서 CSS3 perspective

Question

CSS 3D perspective 속성에 문제가 있습니다.

<figure> 
    <img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" /> 
    <figcaption>Summer in the mountains</figcaption> 
</figure> 

I 단지에서 figcaption의 애니메이션화 할 : -90deg는 블록 평탄화 (그래서 보이지 않는) 대표 점을 감안 0deg로 -90deg에서 폴딩 다운 효과 (같은 http://davidwalsh.name/demo/folding-animation.php)을 수행 호버

/** vendor prefixes have been removed for better readability **/ 
figure { 
    display: inline-block; 
    position: relative; 
    line-height: 0; 
    perspective: 300px; 
} 
figcaption { 
    background-color: rgba(0,0,0,0.2); 
    padding: 20px 10px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 

    transition-property: all; 
    transition-duration: 500ms; 
    transform: rotateX(-123deg); 
    transform-origin: top; 
} 
figure img:hover + figcaption { 
    transform: rotateX(0deg); 
} 

문제는 퍼스펙티브가 Chrome과 Firefox에서 동일한 렌더링을 제공하지 않는다는 것입니다. 퍼스펙티브 디폴트 값을 rotateX(-123deg);으로 수동으로 설정해야합니다. 퍼스펙티브 값은 500px에 따라 다르며, Chrome에서는 잘 작동하지만 Firefox에서는 제대로 작동하지 않습니다.

이론상으로는, -90deg가 아닌 경우 : 호버, 0deg : 호버 일 때, perspective 속성이 깊이 필드의 길이를 변경하여 -90deg가 더 이상 작동하지 않는 것처럼 보입니다.

perspective 및 rotate으로 재생할 때 모범 사례가 최근의 모든 브라우저에서 제대로 작동하도록하려면 궁금합니다.

감사합니다.

---

PS : 그냥, 즉시 뭐가 잘못 표시되어야 HTML & CSS를 붙여 크롬과 FF에서 그것을 시도/복사;, 나는 그것이 도움이되지 않습니다 알고)

Answer 1

을하지만 PERSONNALY 나는 시도 원근법 및 각 브라우저를 가진 몇몇 실험은 원근법을 다른 방법으로 만든다. 일부 브라우저는 퍼스펙티브를 지원하지 않습니다. 따라서 모든 사람이 응용 프로그램에 액세스 할 수 없으며 기본 브라우저가 모두 해당 관점을 완벽하게 준수해야만 다른 응용 프로그램을 사용해야합니다.

Answer 2

아마이 답변이 유용하기에 너무 늦었습니다.

어쨌든 요소 을 보이지 않는으로 만드는 가장 좋은 방법은 각도를 90deg로 유지하는 것이지만 원점 원점을 바로 위에 설정하는 것입니다. 회신에 대한

figure { 
 
    display: inline-block; 
 
    position: relative; 
 
    line-height: 0; 
 
    perspective: 300px; 
 
    perspective-origin: top center; /* added this setting */ 
 
} 
 
figcaption { 
 
    background-color: rgba(0,0,0,0.2); 
 
    padding: 20px 10px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 

 
    transition-property: all; 
 
    transition-duration: 2s; 
 
    transform: rotateX(-90deg); 
 
    transform-origin: top; 
 
} 
 
figure img:hover + figcaption { 
 
    transform: rotateX(0deg); 
 
}

<figure> 
 
    <img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" /> 
 
    <figcaption>Summer in the mountains</figcaption> 
 
</figure>