CSS动画:围绕X轴旋转?
问题描述:
所以我来到了this google doodle左右,我想知道你怎么能用CSS来管理这种轮换(谷歌涂鸦是一个gif)。它看起来像只围绕一个轴旋转,如果我在CSS中旋转,它围绕x和y轴旋转。这是可能的3D旋转(从未使用过,所以我不知道)。CSS动画:围绕X轴旋转?
我在JSfiddle中做了一个基本示例。
HTML:
<div class="rotatediv">
</div>
CSS:
.rotatediv {
background-color: red;
width:500px;
height:500px;
animation-name:rotate_animation;
animation-duration: 15s;
animation-delay:0s;
animation-iteration-count: infinite;
}
@keyframes rotate_animation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
答
诀窍是把一个div的rotatediv内,通过删除其背景颜色,使rotatediv无形。取而代之的是旋转背景色的div。
现在在div里面旋转借助position: absolute;
的帮助。 父div将会旋转,并且子div也会旋转,同时保持父对象的相同方向。
<img src="https://placehold.it/300x300" />
<div class="rotatediv">
<div class="object">
<img src="https://placehold.it/30x30/000000" />
</div>
</div>
.object {
text-align: center;
}
img {
position: absolute;
}
.rotatediv {
width:300px;
height:300px;
animation-name:rotate_animation;
animation-duration: 15s;
animation-delay:0s;
animation-iteration-count: infinite;
}
@keyframes rotate_animation {
0% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}