不旋转整圈css动画答案

【问题标题】：Not spinning full circle css animation不旋转整圈css动画
【发布时间】：2014-03-23 16:20:50
【问题描述】：

我尝试使用纯 CSS3 水平创建旋转图像。

这是我页面的链接

http://www.csupomona.edu/~lannguyen/ISSM_WEB/html/

这是css文件：

www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css

自旋调用者在顶部，实现在底部。

我的问题是 CSS3 提供的旋转不是完全旋转。我想要这样的东西

http://davidwalsh.name/demo/css-cube.php（深度立方体示例，但不需要 3D）。

有人可以帮忙吗。

谢谢

【问题讨论】：

在您的代码中，您将 deg 设置为 320，而不是 360。

标签： css animation

【解决方案1】：

试试这个jsfiddle

    <div class="cube">TRY</div>

CSS

.cube {
background-color: #5F9EA0;
border: 1px solid #CCCCCC;
height: 200px;
position: relative;
transform-style: preserve-3d;
-ms-transform-style:preserve-3d; /* IE 9 */
-webkit-transform-style:preserve-3d; /* Opera, Chrome, and Safari */
width: 200px;
}

 @keyframes spin {
from { transform: rotateY(0); 
    -ms-transform:rotateY(0); /* IE 9 */
 -webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
-webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}

.cube {
animation: spin 5s infinite linear;
-webkit-animation:spin 5s infinite linear;
-ms-animation:spin 5s infinite linear;
}


@-webkit-keyframes spin {
from { transform: rotateY(0); 
    -ms-transform:rotateY(0); /* IE 9 */
-webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
 -webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}

【讨论】：