Tips for animating an element in a straight line while also rotating it using CSS

Whenever I apply the transform property to an element for translate3d and rotate3d, it ends up orbiting around. My goal is to have a linear motion while rotating.

I have utilized webkit animations in CSS

img{height:50px;
    width:50px;
    animation:tt;
    animation-duration:10s;
    position:relative;
    top:40vh;
    left:40vw;}




@keyframes tt
{  0%{  
      transform:rotate3d(0,0,0,0) translate3d(0,0,0);
     }



 50%{
      transform:rotate3d(0,0,1,2000deg) translate3d(300px,0,0);
     }
}

My intention was for it to move forward while rotating, like a car's tire, but instead it resembles a comet or an excited electron.

htmlcss

Answer №1

If you want to create animation using the CSS properties left and right, you can refer to this example on https://www.w3schools.com/css/css3_animations.asp

Below is the snippet that you can use: https://codepen.io/mohamedhmansour/pen/bOONQr

img {
  height: 50px;
  width: 50px;
  animation: tt;
  animation-duration: 5s;
  position: relative;
  top: 0;
  left: 0;
}

@keyframes tt {
  0% {
    transform: rotate(0deg);
    left: 0px;
  }

  50% {
    transform: rotate(-360deg);
    left: 100%;
  }
  100% {
    transform: rotate(0deg);
    left: 0px;
  }
}
<div class="wrapper">
  <img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Small.png" />
</div>

https://codepen.io/mohamedhmansour/pen/bOONQr

Answer №2

The state of 100% was not defined, so by default it will be transform:none (the default value with no transform specified on the element), causing the issue. To resolve this, you need to define it and use a larger angle value while keeping the same axis to maintain your element on the orbit:

.img {
  height: 50px;
  width: 50px;
  animation: tt linear 10s;
  position: relative;
  top: 40vh;
  left: 40vw;
  background:red;
}

@keyframes tt {
  0% {
    transform: rotate3d(0, 0, 0, 0) translate3d(0, 0, 0);
  }
  50% {
    transform: rotate3d(0, 0, 1, 2000deg) translate3d(100px, 0, 0);
  }
  100% {
    transform: rotate3d(0, 0, 1, 4000deg) translate3d(100px, 0, 0);
  }
<div class="img"></div>

If you prefer a linear animation approach, you can do it like this (translation before rotation):

.img {
  height: 50px;
  width: 50px;
  animation: tt linear 5s forwards;
  position: relative;
  top: 40vh;
  left: 40vw;
  background:red;
}

@keyframes tt {
  0% {
    transform: translateX(0) rotate(0);
  }

  100% {
    transform: translateX(100px) rotate(360deg);
  }
<div class="img"></div>

Answer №3

If you're looking to achieve a spinning image effect, you can use the following CSS:

img{
  height: 50px;
  width: 50px;
  position: absolute;
  top:40vh;
  left:40vw;
  -webkit-animation: spinner 10s linear infinite;
  left: 0;
}
@-webkit-keyframes spinner{
  50%{
    -webkit-transform: rotate(1440deg);
    left: calc(100% - 200px);
  }
}
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Current polyfill available for requestAnimationFrame

Recently, I read on that requestAnimationFrame in Chrome 20 now has a new sub-millisecond precision timer. It looks like I need to update my code to accommodate this change. After checking out various polyfills, it seems like they were created before thi ...

javascripthtmlrequestanimationframe

Strange HTML pop-up keeps appearing every time I use styles in my code or insert anything with CSS

Recently, I created an OctoberCMS backend setup through my cPanel (I also have one on my localhost). Now, I am trying to add a background image but every time I attempt to do so, a strange HTML popup appears that I can't seem to figure out. Here is th ...

phphtmlcsscontent-management-systemoctobercms

How can I make an image tag perfectly fit a CSS grid cell without using object-fit?

In this Vue component, the parent element displays 8 instances of these components in a 2x4 grid layout. The issue arises when the image within each component is larger than its container, causing it to not shrink to fit while maintaining the aspect ratio ...

htmlcssvue.js

Tips for inserting an element in the middle of two elements using HTML

Here is the current structure of my DOM: <body> <h1> </h1> <button> </button> <p> </p> I am trying to dynamically add another p element in between the button and the existing paragraph when the button is cl ...

htmlcss

Utilizing media queries to customize the appearance of a jQuery accordion widget

Hello, I'm struggling with implementing a jQuery accordion for mobile platforms that destroys itself on larger screens. While my code is mostly working, I've encountered two issues: The accordion only gets destroyed when the window is resized ...

javascriptjqueryhtmlcssjquery-ui

Ways to utilize a single HTML page for various URLs while changing one variable value based on the queried URL

My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...

javascripthtmlcssangularjsnode.js

Enhance user experience with jQuery UI sortable and the ability to edit content in real

I am facing an issue with jquery sortable and contenteditable. The problem arises when I try to use jquery sortable along with contenteditable, as the contenteditable feature stops working. After searching on Stack Overflow, I found a solution. However, up ...

javascriptjqueryhtmljquery-uicontenteditable

jQuery: Problems with the logic of hasClass

I'm currently troubleshooting an issue with my dropdown menu. I have come across a problem where a condition is false, but it's somehow being treated as true. To help identify the issue, please follow these steps: Click on "item 1" Click on th ...

javascriptjqueryhtml

In a grid container, a child element utilizing `overflow-y: auto` will not be able to scroll

<script src="https://cdn.tailwindcss.com"></script> <div class="h-screen grid grid-rows-[auto,1fr]"> <div class="bg-slate-300 h-24 flex items-center px-4"> <h1 class="text-3xl">Navbar</h1> </div> <div ...

csstailwind-css

Determining the aspect ratio of an image is essential in using flexbox to achieve consistent heights

Recently, I came across a fascinating code pen titled: this demonstration of equal responsive height images I am determined to make sure that all images have the same height, regardless of their width/height variances. The CSS displayed below utilizes fle ...

htmlcssimageflexbox

Attempting to eliminate an HTML element using JavaScript

Currently, I am working on creating an image rotator in JavaScript. The CSS fade animation I have applied only seems to work during element creation, so I am forced to remove the element on each loop iteration. The main issue I am encountering is related ...

javascripthtml

Screen JSON data by applying filters

In my current project, I am working on extracting data from a JSON file and presenting it to the user in a way that allows them to input values that match the expected data. My goal is to show different sections of the screen at different times. The initi ...

javascripthtmljsonknockout.js

What steps can be taken to adjust the alignment of a Bootstrap Dropright menu so that it opens in an upward direction instead of the standard downward

My dropdown menu is dropping towards the right correctly, but it is going downwards and getting hidden under my page. I want it to open upwards instead of downwards. I attempted to adjust the CSS, adding bottom:0 to the dropdown-menu, but unfortunately, i ...

htmlcssdrop-down-menubootstrap-4

Establishing the Default Volume within a script

I'm looking to adjust the default volume of music on my website. Currently, it plays too loudly on load, but I have a slider bar that allows users to change the volume. How can I set the default volume to be 25% of the slider? CHECK OUT MY WEBSITE! ...

javascripthtml

Changing the color of a div through animation

Similar Question: jQuery animate backgroundColor I am looking to make a div shine or switch colors to signal to someone that they have gotten a message. What is the best way to animate the background color of a div for this purpose? ...

javascriptjqueryhtmlcss

Creating a Regular Expression that excludes all white spaces, including those at the start or end of the string

I attempted to implement this solution, however, I am encountering some issues: Click here to see the demo <form name="myform1"> Valid? {{ myform1.$valid }} <input type="text" name="username1" ng-model="username1" ng-pattern="/^\S.*?&bso ...

javascripthtmlangularjs

Removing Header Image from a Single Page on a WordPress Website

Having an issue with my website on WordPress, see it here - I am attempting to remove the home page link attached to the header image on a specific page only of the site. The theme in use is Twenty Thirteen. I believe I need to add some conditional PH ...

phphtmlwordpress

Assignment of Microsoft Avatar Colors

What method does Microsoft utilize to assign colors to contacts in their applications? I've searched online with no luck in finding an answer. In programs like Outlook or Android, when a new contact is added without an image for the avatar, Microsof ...

androidhtmlcssoutlookangular-material

Displaying random divs and subsequently animating them downwards using JavaScript

I am in the process of creating a random appearing div that then falls down. Here is the code I have so far: $(document).ready(function(){ $('#test').animate({top: 80 + '%'},900); }); <div id="test" style="background:#98bf21;heigh ...

javascriptjqueryhtmlcss

Unable to display a recursive component with Vue3 CDN

I am currently working on a project using Vue3 CDN because the project environment cannot run npm. I have been trying to create a component with html+CDN, but when attempting to create a recursive component, it only renders the top-level element. Is there ...

javascripthtmlvue.jsvuejs3