CSS 3D转换旋转:开始在第一次转换中移动
CSS 3D转换旋转:开始在第一次转换中移动
提问于 2014-11-05 17:10:01
我创造了一个3D的玩偶。它将内容排列在一个水平圆圈中，通过将transform: rotateY和translate应用于父轴，该圆圈在y轴上旋转。
问题是，转变的起源似乎是移动的，但只有在第一次过渡.在随后的旋转中，原点按其应有的方式保持在中心。
转载于：
- Chrome 38 OSX
- 铬38 Win7
- Firefox 30 OSX
- Safari 7.0.6 OSX
IE 10 (Win7)有一个不同的错误:它在第一次转换时围绕x轴旋转。
Pen：http://codepen.io/tricki/full/BGuwo
单击“旋转”：在过渡期间原点移动，单击“再次旋转”：原点不再移动，再次单击“旋转”：原点不移动
起初，我认为这是一个浏览器错误，但事实上，火狐有同样的问题，使我怀疑。有人能看到我犯的错误或确认这实际上是浏览器的错误吗？
HTML:
<div id="parent">
<div class="card card-1"></div>
<div class="card card-2"></div>
<div class="card card-3"></div>
<div class="card card-4"></div>
<div class="card card-5"></div>
<div class="card card-6"></div>
<div class="card card-7"></div>
<div class="card card-8"></div>
<div class="card card-9"></div>
<div class="card card-10"></div>
</div>CSS:
#parent {
background: red;
height: 300px;
width: 300px;
margin: auto;
transform-style: preserve-3d;
transform-origin: center center -461px;
transform: translate3d(0, 0, -461px);
}
#parent.active {
transition: transform 5s linear;
transform:rotateY(-144deg) translate3d(0px, 0px, -461px);
}
#parent.active2 {
transition: transform 5s linear;
transform:rotateY(-288deg) translate3d(0px, 0px, -461px);
}
.card {
background: blue;
border: 1px solid green;
position: absolute;
backface-visibility: hidden;
opacity: .5;
height: 100%;
width: 100%;
}
.card-1 { transform: rotateY( 0deg ) translate3d(0, 0, 461px ); }
.card-2 { transform: rotateY( 36deg ) translate3d(0, 0, 461px ); }
.card-3 { transform: rotateY( 72deg ) translate3d(0, 0, 461px ); }
.card-4 { transform: rotateY( 108deg ) translate3d(0, 0, 461px ); }
.card-5 { transform: rotateY( 144deg ) translate3d(0, 0, 461px ); }
.card-6 { transform: rotateY( 180deg ) translate3d(0, 0, 461px ); }
.card-7 { transform: rotateY( 216deg ) translate3d(0, 0, 461px ); }
.card-8 { transform: rotateY( 252deg ) translate3d(0, 0, 461px ); }
.card-9 { transform: rotateY( 288deg ) translate3d(0, 0, 461px ); }
.card-10 { transform: rotateY( 324deg ) translate3d(0, 0, 461px ); }回答 1
Stack Overflow用户
发布于 2014-11-05 18:13:24
删除-461px原点移位和#parent上的Z轴转换就足够解决问题了。
当您已经替换了将要移动的元素时，您不应该取代您的转换原点：“幻灯片”已经相对于z=0的#parent位置了。因此，#parent的旋转也应该相对于这一点。
Pen：http://codepen.io/anon/pen/nAeDc
PS:，你介意我把这个放在我的实验文件夹里吗:)？这太酷了！
var parent = document.getElementById('parent');
var degree = 0;
document.getElementById('rotate').addEventListener('click', function() {
parent.style.transform = "rotateY(" + (degree+=36) + "deg)";
});
document.getElementById('active').addEventListener('click', function() {
parent.style.transform = "";
parent.classList.remove('active2');
parent.classList.add('active');
});
document.getElementById('active2').addEventListener('click', function() {
parent.style.transform = "";
parent.classList.remove('active');
parent.classList.add('active2');
});#parent {
height: 300px;
width: 300px;
margin: auto;
transform-style: preserve-3d;
transform-origin: center center 0;
transition: transform 1s linear;
}
#parent:before {
content: "";
display: block;
width: 6px;
height: 6px;
position: absolute;
top: 50%;
left: 50%;
margin: -3px 0 0 -3px;
background: red;
}
#parent.active {
transform: rotateY(-144deg);
}
#parent.active2 {
transform: rotateY(-288deg);
}
.card {
background: blue;
border: 1px solid green;
position: absolute;
backface-visibility: hidden;
opacity: .5;
height: 100%;
width: 100%;
}
.card-1 { transform: rotateY( 0deg ) translate3d(0, 0, 461px ); }
.card-2 { transform: rotateY( 36deg ) translate3d(0, 0, 461px ); }
.card-3 { transform: rotateY( 72deg ) translate3d(0, 0, 461px ); }
.card-4 { transform: rotateY( 108deg ) translate3d(0, 0, 461px ); }
.card-5 { transform: rotateY( 144deg ) translate3d(0, 0, 461px ); }
.card-6 { transform: rotateY( 180deg ) translate3d(0, 0, 461px ); }
.card-7 { transform: rotateY( 216deg ) translate3d(0, 0, 461px ); }
.card-8 { transform: rotateY( 252deg ) translate3d(0, 0, 461px ); }
.card-9 { transform: rotateY( 288deg ) translate3d(0, 0, 461px ); }
.card-10 { transform: rotateY( 324deg ) translate3d(0, 0, 461px ); }<div id="parent">
<div class="card card-1">1</div>
<div class="card card-2">2</div>
<div class="card card-3">3</div>
<div class="card card-4">4</div>
<div class="card card-5">5</div>
<div class="card card-6">6</div>
<div class="card card-7">7</div>
<div class="card card-8">8</div>
<div class="card card-9">9</div>
<div class="card card-10">10</div>
</div>
<button id="rotate">Rotate 1step</button>
<button id="active">Rotate</button>
<button id="active2">Rotate again</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26763048
复制相关文章
相似问题
腾讯云开发者
