이미 회전 된 div에서 CSS rotate3d 사용

Question

이미 회전 된 div의 축에 문제가 있습니다.

지금 다이아몬드가 측면 내에서 회전하고 그 상단 중심으로 회전하려고합니다.

<div class="diamond"> 
    <div class="diamondIn"> 
     <div class="front"></div> 
     <div class="back"></div> 
    </div> 
</div> 

는 CSS

.diamond 
{ 
height: 150px; 
width: 150px; 
-webkit-perspective: 1000; 
-moz-perspective: 1000; 
perspective: 1000; 
transform: rotate(-45deg); 
-webkit-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
position: absolute; 
} 

.diamondIn 
{ 
height: 150px; 
width: 150px; 
-webkit-transition: 0.6s; 
-moz-transition: 0.6s; 
transition: 0.6s; 
-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
transform-style: preserve-3d; 
position: relative; 
float: left; 
} 

.diamondIn:hover 
{ 
-webkit-transform: rotate3d(0,1,0,180deg); 
-moz-transform: rotate3d(0,1,0,180deg); 
transform: rotate3d(0,1,0,180deg); 
} 

.diamondIn .front, 
.diamondIn .back 
{ 
top: 0; 
left: 0; 
height: 150px; 
width: 150px; 
background: #fff; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 
position: absolute; 
} 

.diamondIn .front 
{ 
z-index: 2; 
background: #00ff00; 
} 

.diamondIn .back 
{ 
-webkit-transform: rotate3d(0,1,0,180deg); 
-moz-transform: rotate3d(0,1,0,180deg); 
transform: rotate3d(0,1,0,180deg); 
background: #ff0000; 
} 

사람이 어떤 생각을 가지고 있습니까 http://jsfiddle.net/DtQd8/

HTML : 여기

은 예입니다?

Answer 1

나는 당신의 CSS를 약간 편집했다. "Transform"속성을 +45 도로 변경했습니다. 이와 함께 3D 좌표도 변경되었습니다. 업데이트 된 코드는 다음과 같습니다.

.diamond 
{ 
height: 150px; 
width: 150px; 
-webkit-perspective: 1000; 
-moz-perspective: 1000; 
perspective: 1000; 
transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
position: absolute; 
} 

.diamondIn 
{ 
height: 150px; 
width: 150px; 
-webkit-transition: 0.6s; 
-moz-transition: 0.6s; 
transition: 0.6s; 
-webkit-transform-style: preserve-3d; 
-moz-transform-style: preserve-3d; 
transform-style: preserve-3d; 
position: relative; 
float: left; 
} 

.diamondIn:hover 
{ 
-webkit-transform: rotate3d(150,150,0,180deg); 
-moz-transform: rotate3d(150,150,0,180deg); 
transform: rotate3d(150,150,0,180deg); 
} 

.diamondIn .front, 
.diamondIn .back 
{ 
top: 0; 
left: 0; 
height: 150px; 
width: 150px; 
background: #fff; 
-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 
position: absolute; 
} 

.diamondIn .front 
{ 
z-index: 2; 
background: #00ff00; 
} 
.diamondIn .back 
{ 
-webkit-transform: rotate3d(150,150,0,180deg); 
-moz-transform: rotate3d(150,150,0,180deg); 
transform: rotate3d(150,150,0,180deg); 
background: #ff0000; 
} 

Answer 2

당신은 이, 상단을 왼쪽으로 추가 할 필요가 및 마진 왼쪽

.diamond 
{ 
height: 150px; 
width: 150px; 
-webkit-perspective: 1000; 
-moz-perspective: 1000; 
perspective: 1000; 
transform: rotate(-45deg); 
-webkit-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
position: absolute; 
top:40px; 
left:50%; 
margin-left:-75px; 
} 

데모 http://jsfiddle.net/DtQd8/1/

Answer 3

외부 사업부의 변환이 안 된 div의 좌표계를 변경 (좋은 설명 here). 이것이 내부 div가 이미 회전 된 축을 중심으로 회전하는 이유입니다.

내부 div에 '정적'변환을 적용하고 변환되지 않은 좌표로 전체 구조를 동적으로 회전하는 것이 좋지 않습니까?

JSFiddle을 편집하여 의견에서 발생하는 모든 변환을 설명하려고 시도했습니다 : jsfiddle.net/DtQd8/2/. 그 일을 짐작 했니? :)