我尝试使用纯 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)。
谁能帮忙吗
谢谢
最佳答案
试试这个 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 */
}
}
关于css - 不旋转整圈CSS动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22588314/