2017-04-21 28 views
4

부모에게 적용된 하나의 변환과 자식에게 적용되는 하나의 통합 된 하나의 변환으로 두 개의 CSS 변환을 결합하여 성능을 향상 시키려고합니다. 그래서, 제 질문은 이것입니다 : 나는 아래 계산에서 무엇을 놓치고 있습니까.CSS 행렬 합치기

나는 매트릭스를 추가 할 때 잘못된 무엇
parent { 
    transform-style: preserve-3d; 
    transform: translateY(50vh) translateZ(-50vh) rotateX(90deg) rotateY(180deg) rotateZ(180deg); 
} 
          +
child { 
    transform: translateZ(-100vh) rotateX(90deg); 
} 
         and I got
combined { 
    transform: translateY(50vh) translateZ(-150vh) rotateX(180deg) rotateY(180deg) rotateZ(180deg); 
} 

?

답변

1

비슷한 변환을 합칠 수 없습니다. 모두 연결해야합니다.

글쎄, 특별한 경우가 있지만, 대부분의 시간이이 완벽하게 작동, 결과는

child { 
transform: translateY(50vh) translateZ(-50vh) rotateX(90deg) rotateY(180deg) rotateZ(180deg) 
      translateZ(-100vh) rotateX(90deg); 

}

+1

감사합니다 것

사실이다. 또한 저에게 css에 관해 새로운 것을 가르쳐 주신 것에 감사드립니다. 하나의 문장에서 여러 개의 동일한 변환을 가질 수 있다는 점에 감사드립니다. 더 많이 알수록 .... –