Incomplete Rotation CSS Animation

I am attempting to create a horizontal spinning image using only CSS3.

Check out my webpage here:

You can find the CSS file here:

www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css

The code for calling the spin effect is at the top, with the actual implementation at the bottom.

However, I am facing an issue where the spinning animation provided by CSS3 does not complete a full rotation. I would like it to be similar to this example:

http://davidwalsh.name/demo/css-cube.php (the 3D cube example, but without the need for 3D effects).

If anyone could offer some assistance, I would greatly appreciate it.

Thank you!

cssanimation

Answer №1

Check out this interactive demo

    <div class="cube">TRY</div>

Styling with CSS

.cube {
background-color: #5F9EA0;
border: 1px solid #CCCCCC;
height: 200px;
position: relative;
transform-style: preserve-3d;
-ms-transform-style:preserve-3d; /* IE 9 */
-webkit-transform-style:preserve-3d; /* Opera, Chrome, and Safari */
width: 200px;
}

 @keyframes spin {
from { transform: rotateY(0); 
    -ms-transform:rotateY(0); /* IE 9 */
 -webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
-webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}

.cube {
animation: spin 5s infinite linear;
-webkit-animation:spin 5s infinite linear;
-ms-animation:spin 5s infinite linear;
}


@-webkit-keyframes spin {
from { transform: rotateY(0); 
    -ms-transform:rotateY(0); /* IE 9 */
-webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
 -webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}

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

When hovering the mouse over, the text fails to appear

Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas? http://jsfiddle.net/cryycw3n/ HTML <div class="square"> <div class="info"> <h2&g ...

htmlcss

Adjusting the size of tables in raw JavaScript without altering their positioning

I am attempting to adjust the size of a th element without impacting the position of the next th in the row. Specifically, I want the width of the th to influence the width of the next th accordingly, rather than pushing it to the left. Below is the code ...

javascriptcsshtmlresize

My element's padding being overlooked by Tailwind CSS

In the process of developing a comment/response mechanism through MPTT, I am utilizing indentation to clearly designate replies and their respective levels. The comment.level attribute is being employed to establish the padding value. Consequently, a comm ...

htmlcsstailwind-css

Elements floating in space, stretching across the entire width

In my design, I have a fixed size layout with a centered content container. My goal is to have the menu (home, about, contact, login) span 100% of the screen width. You can view the current setup in this jsfiddle: http://jsfiddle.net/Hxhc5/1/ I am aimin ...

csscss-float

Trouble with highlighting the chosen menu item

I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free ...

javascriptjqueryhtmlcss

Enhance user experience with a flexbox navigation bar that dynamically adjusts link heights to ensure

I am struggling with making my navbar links the same height and keeping their text vertically centered, especially when they wrap onto multiple lines on a narrow viewport. While I have achieved vertical centering, I am facing difficulties in ensuring that ...

htmlcssflexbox

Develop with originate effect JQuery animation

Looking for help on creating a popup div that grows outward from the center of a button and slides to the center of the screen when clicked. Struggling to find snippets, any assistance would be appreciated. Special thanks to Jamie Dixon for helping me get ...

jqueryanimation

JavaFX: Achieving uniform size for multiple circles

I have a seemingly straightforward question that has been puzzling me. I am looking to define multiple circles in my FXML file; 10 of these circles should have a radius of 10px, while 20 others should have a radius of 6px. I want to establish the size at o ...

javacssxmljavafxfxml

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

javascripthtmlcss

Update the positioning of the element to center instead of the default top left origin using jQuery

I am facing an issue with positioning a marker inside a triangle, which is represented by a simple div, as shown in the image below: https://i.stack.imgur.com/0Q7Lm.png The marker needs to be placed exactly at the centroid of the triangle. However, it see ...

javascriptjquerycss

Bring your images to life with a captivating 3D hover effect

I am looking to achieve a similar effect using JavaScript instead of just pure CSS like the example provided. I'd prefer not to use SCSS either, just sticking to CSS would be great. Please check out this CodePen for reference. .picture-container ...

javascripthtmlcssvue.jshover

How to Fix Items Being Pushed Down by 'Particleground' Jquery Plugin Due to Z-Index and Positioning

I'm grappling with understanding z-index and positioning, despite reading various questions and articles on the topic. Currently, I'm attempting to incorporate a Jquery Plugin called 'Particleground': https://github.com/jnicol/particle ...

javascriptjqueryhtmlcssjquery-plugins

Display all pages in the DataTables plugin while utilizing responsive tables and additional features

I am struggling to combine the responsive and fixed header attributes of my current function with the "Show All" list feature, similar to what is demonstrated in this example: https://datatables.net/examples/advanced_init/length_menu.html I need assistanc ...

javascriptjquerycssdatatables

I am having trouble getting my footer to align properly in a vertical position

My goal is to have my li elements remain on the same line, but unfortunately, they are not cooperating (they are aligning horizontally, but that's all). Here is the code snippet: <footer> <div class="container"> <div id="coi ...

htmlcssbootstrap-4

The web server experiences a layout and functionality breakdown caused by an issue with the config.js file following the uploading process

I recently created a website. However, when I uploaded it to my hosting company's server and tested it on different browsers, the layout appeared broken. Some of the CSS files loaded properly, but certain elements and styles were not in their correct ...

phpjquerycsshtml

The functionality of cloning in jQuery may encounter an issue where the text field remains enabled if the user selects an option labeled "other

Currently, I am working on a jQuery clone with my existing code and everything is functioning well. In the first scenario, if the user selects other from the dropdown menu, the text field becomes enabled. In the second scenario, when the user clicks ...

javascriptjqueryhtmlcss

Position the background of the container in the center and keep it

I am trying to create a fixed background header using the following CSS properties: header { margin: 0; padding: 0; width: 100%; height: 300px; display: block; background-image: url('...'); background-repeat: no-repea ...

htmlcssbackgroundfixed

Finding and removing a specific CSS pattern from a webpage that has been loaded

Encountered a troublesome Amazon.com page that appears blank in print preview, specifically the Online Return Center\Your Return Summary page. After much troubleshooting on a locally saved copy of the webpage, I pinpointed the issue to a problematic l ...

cssdeveloper-tools

Adjusting the size of the entire webpage using Bootstrap 5

My webpage is built using Bootstrap 5 and overall, I am pleased with how it looks. However, I'm finding that all the body elements are too large. View Elements too large The elements at the bottom of the page are getting cut off and I want the entir ...

htmlcssasp.net-mvcbootstrap-5

Troubles with caching on Amazon S3

Just starting out in web development and I'm working on updating HTML and CSS files stored on Amazon S3. Our website's backend is hosted on Heroku, while the front-end is on Amazon S3. Whenever I make changes to a CSS file, I can immediately see ...

htmlcssherokuamazon-web-servicesamazon-s3