如何在css3动画中围绕椭圆形图像旋转图像？ [英] how rotate an image around on oval shape image in css3 animation?
本文介绍了如何在css3动画中围绕椭圆形图像旋转图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是一个初学者在css3 animations.i有一个任务，像一个钢笔图像旋转在椭圆形形状image.as，就像我可以我试着下面的代码是用于我的任务。任何一个帮助我请？。
am a beginner in css3 animations.i have one task like,a pen image is rotate around on oval shape image.as much as i can i tried the following code is used on my task.can you any one help me please?.
#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>
推荐答案
为了使它在一个椭圆形状，你可以变形你正在做旋转的地方。
并且，要使正在旋转的对象保持宽高比，您需要撤消之前的变换。
What is easily done in CSS is to rotate something. To make it go around in an oval shape, you can deform the place where you are doing the rotation. And, to make the object that you are rotating keep the aspect ratio, you need to undo the previous transforms.
HTML：
<div class="deform">
<div class="rotate">
<div class="counterrotate">
<div class="inner">A
</div>
</div>
</div>
</div>
和CSS
.deform {
width: 200px;
height: 200px;
-webkit-transform: scaleX(3);
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
border-radius: 50%;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
-webkit-transform-origin: 50% 50%;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 50px;
height: 50px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
-webkit-transform: scaleX(0.33);
}
@-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
@-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
这篇关于如何在css3动画中围绕椭圆形图像旋转图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
