CSS3 perspective z 축 가시성

DEF 요소에 CSS3 perspective가 있습니다. DIV는 두 개의 하위 DIV를 포함하며, 이들 중 하나는 z 축의 변환을가집니다. 이것은 하나의 DIV가 다른 DIV 앞에 오도록해야하므로 뒤에있는 DIV는보기에서 차단되어야합니다.
그러나 이러한 DIV의 가시성은 CSS3 관점에서 자동으로 처리되는 대신 HTML에 나타나는 순서에 따라 제어되는 것처럼 보입니다.
아래 코드에서 # div3은 z 축에서 # div2 뒤에 있지만 HTML에서 뒤 따르기 때문에 앞에 표시됩니다.
z-index 속성을 사용하여 어떤 DIV가 앞에 있어야하는지 명시 적으로 알 수 있지만 다시 자동화 된 방법을 찾고 있습니다.CSS3 perspective z 축 가시성

<html> 
<head> 
<style type="text/css"> 
#div1 
{ 
position: relative; 
height: 150px; 
width: 200px; 
-moz-perspective:150px; 
-webkit-perspective:150px; 
} 
.child 
{ 
padding:50px; 
position: absolute; 
} 
#div2 
{ 
background-color: red; 
} 
#div3 
{ 
background-color: green; 
-moz-transform: translateZ(-50px); 
-webkit-transform: translateZ(-50px); 
} 
</style> 
</head> 
<body> 
<div id="div1"> 
    <div id="div2" class="child">HELLO</div> 
    <div id="div3" class="child">HELLO</div> 
</div> 
</body> 
</html>

참조 :

jsFiddle

출처

2012-07-25 Daniel W

오히려 perspective: 150px; 사용 transform: perspective(150px);를 사용하는 것보다. 그런 다음 transform-style: preserve-3d;을 사용하여 z 축을 사용할 수있게합니다. 관련 스타일 http://jsfiddle.net/joshnh/4DjLP/

을 그리고 여기에 있습니다 : : 당신의 "3D 공간"컨테이너 overflow:hidden에 대한

#div1 { 
    transform: perspective(150px); 
    transform-style: preserve-3d; 
}

출처

2012-07-25 08:26:48 joshnh

확인 여기

은 (무슨 일이 일어나고 있는지 볼 수 있도록하기 위해 회전)에 대한 참조입니다 .

것은 오늘 크롬에서 똑같은 문제가 발생했습니다, 그래서 난 내 -webkit-perspective: 300px; -webkit-transform: perspective(300px);에 그러나 실제로 트릭을하지 않았다을 변경하려고했지만 변경 레이어를 통해 배열 정지 후 나에게 힌트 원인을 주었다 Z 축은 전혀 없습니다. 내 주 컨테이너에 overflow:hidden이라는 것이 나왔습니다. 나는 관점을 설정해 왔습니다.

출처

2013-05-03 08:52:43 Brock

CSS3 perspective z 축 가시성

답변

관련 문제