저는 3D 큐브를 만드는 프로젝트를 진행하고있었습니다. CSS에서 실수를 찾기 위해 몇 시간을 보냈습니다. 나는 아무것도 찾을 수 없었다. 그런 다음 코드를 조작하기 시작했습니다. 회전하기 전에 변환을 사용 transform: translateX(value px) rotateY(value deg);하면 결과가 깨진 큐브가 될 것입니다. 큐브의 상단, 오른쪽 및 왼쪽에만 영향을 미칩니다. 입방체의 바닥과 뒷면에 역효과가있는 반면, 즉 transform: rotateX(vlaue deg) translateY(value px);나에게 뒤와 바닥이 무너지고 있습니다. 다음은 JSFiddle 입니다.
도움이 되었기를 바랍니다
두 가지 변환 순서를 고려하십시오.
transform: translateX(value px) rotateY(value deg);이 경우 rotateY를 먼저 수행 한 다음 translateX를 수행하면 transform-origin속성 때문에 큐브가 깨져서 제거하면 완벽합니다.
transform-origin 속성을 변환 변환 함수에 적용하면 결과에 뚜렷한 시각적 차이가 없습니다. 이는 변형의 영향을받는 요소가 모양, 크기 또는 회전을 변경하지 않고 이동되기 때문입니다.
.wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
margin-top: 150px;
}
.cube {
position: relative;
width: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: spin 10s linear infinite;
animation: spin 10s linear infinite;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
color: #66cc00;
background: pink;
}
.cube .back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.cube .front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.cube .right {
-webkit-transform: translateX(100px) rotateY(-270deg);
transform: translateX(100px) rotateY(-270deg);
}
.cube .left {
-webkit-transform: translateX(-100px) rotateY(270deg);
transform: translateX(-100px) rotateY(270deg);
}
.cube .top {
-webkit-transform: translateY(-100px) rotateX(-90deg);
transform: translateY(-100px) rotateX(-90deg);
}
.cube .bottom {
-webkit-transform: translateY(100px) rotateX(90deg);
transform: translateY(100px) rotateX(90deg);
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
} <div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>2.transform: rotateX(value deg) translateY(value px);
이 경우 translateY를 먼저 한 다음 rotateX를 수행하므로 transform-origin 속성이 필요하며 변형 된 요소의 위치를 변경할 수 있습니다.
여기서 transform-origin은 두 번째로 rotateX에 적용됩니다. 따라서 transform-origin은 전체 요소를 이동하는 대신 요소가 변환되는 지점을 변경합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다