我正在使用 CSS transform3d 功能构建旋转立方体。 它在 Chrome 上运行良好,但在 Safari 和 我不明白为什么它显示为错误的方式。
我创建了这段代码的 Plunker,这样你就可以真正解决这个问题。 这段代码的理想外观可以在 Chrome 和 我想让它看起来与 Chrome 上发生的完全一样。
我将不胜感激,不仅包括修复代码,还包括 还说明了为什么它不起作用。
Plunker 代码
http://plnkr.co/edit/csvtleYoWvOFccm4idcP?p=preview
HTML
<div class='welcome'>
<div id='animating_cube'>
<div class='face1'></div>
<div class='face2'></div>
<div class='face3'></div>
<div class='face4'></div>
</div>
<div id='message'>
<h1>Title</h1>
<span>
This is an animating cube.
</span>
</div>
</div>
CSS
.welcome {
position: relative;
width: 300px;
margin: 0 auto;
height: 300px;
}
.welcome #animating_cube {
display: block;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-45deg);
-webkit-transform: rotateX(-30deg) rotateY(-45deg);
margin: 0 auto;
width: 300px;
height: 300px;
position: absolute;
top: 0px;
-webkit-animation: animatingCubeRotate 5s linear 0s infinite normal;
animation: animatingCubeRotate 5s linear 0s infinite normal;
}
.welcome #animating_cube .face1 {
display: block;
width: 150px;
transform-style: preserve-3d;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
-webkit-animation: keyframeForFace1 5s linear 0s infinite normal;
animation: keyframeForFace1 5s linear 0s infinite normal;
}
.welcome #animating_cube .face2 {
display: block;
width: 150px;
transform-style: preserve-3d;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
-webkit-animation: keyframeForFace2 5s linear 0s infinite normal;
animation: keyframeForFace2 5s linear 0s infinite normal;
}
.welcome #animating_cube .face3 {
display: block;
width: 150px;
transform-style: preserve-3d;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
-webkit-animation: keyframeForFace3 5s linear 0s infinite normal;
animation: keyframeForFace3 5s linear 0s infinite normal;
}
.welcome #animating_cube .face4 {
display: block;
width: 150px;
transform-style: preserve-3d;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
-webkit-animation: keyframeForFace4 5s linear 0s infinite normal;
animation: keyframeForFace4 5s linear 0s infinite normal;
}
.welcome #animating_cube .face1 {
background: #eeeeee;
transform: rotateX(90deg) translateZ(75px);
-webkit-transform: rotateX(90deg) translateZ(75px);
}
.welcome #animating_cube .face2 {
background: #cccccc;
transform: rotateY(90deg) translateZ(75px);
-webkit-transform: rotateY(90deg) translateZ(75px);
}
.welcome #animating_cube .face3 {
background: #dddddd;
transform: translateZ(74px);
-webkit-transform: translateZ(74px);
}
.welcome #animating_cube .face4 {
background: #cccccc;
transform: rotateY(-90deg) translateZ(75px);
-webkit-transform: rotateY(-90deg) translateZ(75px);
}
.welcome #message {
position: absolute;
width: 300px;
top: 70px;
}
.welcome #message h1 {
text-align: center;
}
.welcome #message span {
font-size: 13px;
letter-spacing: 2px;
text-align: center;
}
@-webkit-keyframes animatingCubeRotate {
0% {
-webkit-transform: rotateX(-30deg) rotateY(-45deg);
}
100% {
-webkit-transform: rotateX(-30deg) rotateY(45deg);
}
}
@keyframes animatingCubeRotate {
0% {
transform: rotateX(-30deg) rotateY(-45deg);
-webkit-transform: rotateX(-30deg) rotateY(-45deg);
}
100% {
transform: rotateX(-30deg) rotateY(-45deg);
-webkit-transform: rotateX(-30deg) rotateY(-45deg);
}
}
@-webkit-keyframes keyframeForFace2 {
0% {
background: #cccccc;
}
100% {
background: #bbbbbb;
}
}
@keyframes keyframeForFace2 {
0% {
background: #cccccc;
}
100% {
background: #bbbbbb;
}
}
@-webkit-keyframes keyframeForFace3 {
0% {
background: #dddddd;
}
100% {
background: #cccccc;
}
}
@keyframes keyframeForFace3 {
0% {
background: #dddddd;
}
100% {
background: #cccccc;
}
}
@-webkit-keyframes keyframeForFace4 {
0% {
background: #cccccc;
}
100% {
background: #dddddd;
}
}
@keyframes keyframeForFace4 {
0% {
background: #cccccc;
}
100% {
background: #dddddd;
}
}
谢谢
最佳答案
Safari 只需要 -webkit-transform-style
而不是 -transform-style
。我也加了
-webkit-transform: translateZ(200px);
添加到文本 (.welcome #message
),这样它就不会在 Safari 中与立方体相交,因为它在 Chrome 中不会。
关于html - 在 Chrome 上运行良好的 Css 3D 动画在 Safari 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28341882/