Как повернуть изображение вокруг изображения овальной формы в анимации CSS3?
я новичок в css3 animations.i у меня есть одна задача, например, изображение пера вращается вокруг изображения овальной формы. насколько я могу, я попробовал следующий код, который используется в моей задаче. Можете ли вы помочь мне, пожалуйста?
#txtBoxRotateContainer { height: 800px; }
#txtBoxRotateContainer {
height: 400px;
left: 18px;
position: absolute;
top: 305px;tive;
height: 400px;
}
div.rocket {
left: 136px;
position: absolute;
top: 316px;
-webkit-transition: all 3s ease-in;
/* Safari and Chrome */
-webkit-animation:myfirst 6s infinite;
}
@-webkit-keyframes myfirst {
0% {
-webkit-transform: rotate(-360deg);width:250px;left:130px;top:-100px;
}
50% {
-webkit-transform:rotate(-180deg);left:80px;top:150xpx;width:360px;
}
100% {
-webkit-transform: rotate(-10deg);width:700px;height:500px;top:250px;right:40px;
}
}
body
{
line-height:130%;
-webkit-tap-highlight-color: rgba(0,0,0,0)!important;
-webkit-tap-highlight-color: transparent!important;
}
</style>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;">
<img src="../images/page7.jpg" width="778" height="1100" alt="image"/></div>
<div id="txtBoxRotateContainer">
<div class="rocket"><img src="../images/pencil.png" alt="pencil" /></div>
</div>
</body>
</html>