javascript - how rotate an image around on oval shape image in css3 animation?

Question

Welcome To Ask or Share your Answers For Others

javascript - how rotate an image around on oval shape image in css3 animation?

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1.2k views

1 Answer

深蓝 · Answer 1 · 2021-10-23T21:43:07+0000

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.

The HTML:

<div class="deform">
<div class="rotate">
<div class="counterrotate">
<div class="inner">A
</div>
</div>
</div>
</div>

and the 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)}
}

Categories

javascript - how rotate an image around on oval shape image in css3 animation?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

demo

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags