하나의 div에 다른 원점을 가진 두 개의 변형을 적용 할 수 있습니까?

저는 원점을 중심으로 y 축에 대해 회전하고 싶은 div가 있고 다른 원점을 중심으로 다른 3d 회전을하고 결과를 표시하고 싶습니다. 이것이 가능한가? Transformation Statement 외부에서 작동하는 변형 원점 만 가져올 수 있었기 때문에 새 변형을 정의하면 첫 번째 것을 우선 적용합니다.하나의 div에 다른 원점을 가진 두 개의 변형을 적용 할 수 있습니까?

div를 중첩시키고 내부 div에서 하나의 변환을 수행하고 외부 div에서 다른 변환을 시도했지만 그 결과는 첫 번째 변환을 두 번째 평면에 투영 한 것일뿐입니다 자체 비행기에, 너무 완전히 화면에 잘못 보인다.

JavaScript로 캔버스를 사용할 수 없다는 것을 알고있는 한, 그러한 변환에는 원근법이 없기 때문에.

이것은 내가 뭘하려고 오전의 일종이다 :

나는 이러한 변환의 모두의 결과를 볼 수있는 방법에 대한 아이디어

-webkit-transform-origin: 0px 0px; 
-webkit-transform: perspective(1000px) rotateY(-90deg); 
-webkit-transform-origin: 200px 200px; 
-webkit-transform: perspective(1000px) rotateX(x deg) rotateZ(z deg);

출처

2011-10-02 Curyous

내가 답을 찾은 것 같아 래퍼 DIV에

-webkit-transform-style: preserve-3d;

를 사용합니다.

this의 질문에 감사 드리며, 표시된 내용은 here이며 here (그 질문에 대한 답변에서 설명 됨)입니다.

출처

2011-10-02 07:45:38 Curyous

니스 쉽게 대답합니다. 아나의 대답은 번역을 사용하는 일반적인 방법을 제공하므로 받아 들여진 대답이어야합니다. 그녀는 preserve-3d가 다른 질문에서 작동하지 않도록하는 해결 방법을 제공했습니다. –

해결 방법은 다음과 같습니다. http://stackoverflow.com/questions/20725192/css3-3d-cube-ie-transform-style-preserve-3d-aroundaround –

래퍼가없는 솔루션은 두 개의 변환을 사이에 translate3d으로 연결하는 것입니다. 상관 모든 후속 변환을 위해 이동 께 transform-origin 변환 번역 - y 축의 ty 의해 translateY(ty) 이동을, x 축 방향 tx 의해 Z 축을 따라 tz 의해 translateZ(tz) 이동을하고 translate3d(tx, ty, tz) 이동하여, translateX(tx) 이동을 tx함으로써 x 축의 y 축을 따라 ty만큼, z 축을 따라 tz만큼 증가합니다.

그래서 transform 될 것입니다 : 그것은 IE11를 지원하지 않는다는 사실이 아니었다

transform: perspective(1000px) rotateY(-90deg) 
      translate3d(200px, 200px, 0) 
      perspective(1000px) rotateX(x deg) rotateZ(z deg);

출처

2013-01-19 14:26:52 Ana

하나의 div에 다른 원점을 가진 두 개의 변형을 적용 할 수 있습니까?

답변

관련 문제