요소가 적용된 후 사라집니다. 양수 인수가있는 perspective() 함수

Question

저는 CSS의 8 장 : The Definitive Guide, 4 판을 읽었습니다. 책에 같은 조각이있다 :

div#inner { 
 
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
 
}

<div id="outer"> 
 
    outer 
 
    <div id="inner">inner</div> 
 
</div>

#inner과 함께 DIV 내 크롬 브라우저에서 사라는. 퍼스펙티브 함수의 인수 값을 조정하고 0으로 설정 한 후 회전 효과가있는 페이지에서 inner 텍스트를 볼 수 있습니다.

이유를 알고 계십니까? 나는 사파리에서이 페이지를 시도했다. 문제는 여전히있다.

Answer 1

원근의 기원은 기본적으로 요소의 중심에보십시오.

블록 요소이기 때문에이 중심은 요소의 텍스트 부분 오른쪽에 있으며 결과적으로 왼쪽으로 이동하게되어 일부 해상도에서는 페이지의 왼쪽 테두리 뒤쪽으로 이동할 수 있습니다. 크롬의

div#inner { 
 
    background-color: lightblue; 
 
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
 
}

<div id="outer"> 
 
    outer 
 
    <div id="inner">inner</div> 
 
</div>

div#inner { 
 
    width: 70px; 
 
    background-color: lightgreen; 
 
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
 
}

<div id="outer"> 
 
    outer 
 
    <div id="inner">inner</div> 
 
</div>

Answer 2

이

div#inner { 
 
      transform: rotate(30deg) translate(20px) perspective(30px); 
 
\t \t \t width: 100px; 
 
     }

<div id="outer"> 
 
     outer 
 
     <div id="inner">inner</div> 
 
    </div>