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

Struggling to implement a Rock Paper Scissors game using HTML, CSS Bootstrap4, and JavaScript, specifically facing challenges in getting the function to select a new image

Recently, in my coding class, we were tasked with creating a program that would display images of dice and generate random numbers when the refresh button was clicked. To practice using querySelector and setAttribute, I decided to expand on the lesson by i ...

javascriptcsshtmlbootstrap-4

Using react-confetti to create numerous confetti effects simultaneously on a single webpage

I'm looking to showcase multiple confetti effects using the react-confetti library on a single page. However, every attempt to do so in my component seems to only display the confetti effect on the last element, rather than all of them. The canvas fo ...

reactjstypescriptanimationreact-ref

Activate modifications in a distinct column?

I've been exploring a solution to achieve a similar functionality where clicking or hovering on headings in a column brings up corresponding text in another column. My idea is to use list items with a carousel for this purpose, but I'm facing so ...

javascripthtmlcss

The chosen color for the link button in CSS

PHP CODE : $getOID=$_GET["id"]; for($i=$getOID-($getOID-1); $i<=5;$i++){ echo '<a class="current" href="postlogin.php?id='.$i.'">'.$i.'</a>'; } CSS STYLING FOR BUTTONS : .pagging { height:20px; ...

cssbuttonhyperlinkselected

How to position one element relative to another using CSS

I need to strategically place four div elements in relation to another element. I have a rectangular div, and my goal is to insert four div elements at each of its corners. While I am aware of the CSS attribute "position: relative", it only allows me to ...

csscss-position

Exploring ways to customize the styles of MUI Accordion components in a Next.js project using CSS modules

I'm trying to customize the default MUI CSS for the accordion component using a CSS module. The issue I'm facing is that the class is dynamically added by MUI, making it impossible to target directly. Here's the solution I attempted, but it ...

csssassnext.jsmaterial-uicss-selectors

Position the Radio Buttons on Top of the Image

I need assistance with positioning radio buttons on top of an image at a specific location. Both the image and radio buttons are currently in a Div container, but I am unsure about the next steps. Below is where I would like to place the radio buttons (red ...

htmlcss

Can you explain the significance behind this unorthodox CSS code?

Assisting a customer in updating their Shopify theme. The previous designer used an unconventional method to establish the grid system. I require assistance in decoding the code. I came across an old article on this topic but still couldn't grasp it. ...

csscss-selectors

Troubleshooting Bootstrap 3.0: Issues with nav-tabs not toggling

I have set up my navigation tabs using Bootstrap 3 in the following way: <ul class="nav nav-tabs pull-right projects" role="tablist" style="margin-top:20px;"> <li class="active"><a role="tab" data-toggle="tab" href="#progress">In Pr ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to align these divs horizontally?

I am facing an issue with my web page layout. I have a list of topics that I need to display, with four topics in each row. However, when I try to render them, they end up aligning vertically instead of horizontally like this: This is the CSS code snippet ...

cssreactjs

Revolutionary scroll-based navigation fill transition

I'm attempting to achieve an effect where the fill color of the "insticon" SVG changes from black to white based on the scroll position indicated in the jQuery code. I have made the necessary modifications in the if and else statements, but unlike "he ...

javascriptjqueryhtmlcsssvg

How come my TABLE element is not showing padding when using border-spacing?

Looking to add some padding above and below my TABLE element, I came across the border-spacing property. Here's my table: <table id="ranks"> <tbody><tr class="ranksHeaderRow"> <th></th> <th>Name ...

htmlcsshtml-tableborder

Browser disregards backslashes in the content of pseudo elements

I have been struggling with a simple issue for quite some time now, and I seem to be out of ideas. The problem lies in the styling of a CSS pseudo-element before, which is defined as follows: #fPhone::before{ color: #78be20; content: "\e622" ...

htmlcsspseudo-element

Disable the "top" property for the Material UI Drawer component

I'm currently working on implementing a Persist Left Drawer from Material UI that slides in from the left side. However, I don't want the drawer to cover the entire left side of the page. Essentially, I want to remove the "top" style property men ...

cssreactjsmaterial-ui

None of the angular directives are functioning properly in this code. The function attached to the submit button is not executing as expected

I've experimented with various Angular directives in this code, but none seem to be functioning properly. I'm wondering if a library file is missing or if there's some issue within the code itself, potentially related to the jQuery file. The ...

javascriptjqueryhtmlcssangularjs

The resizing of the background image is contingent upon the size of the

I am facing an issue with my bootstrap carousel. One of the items only contains a background image without any content. I have set a height for it so that it is still visible even without content. However, when viewing on mobile devices, I can only see a p ...

jqueryhtmlcsstwitter-bootstrap

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

What are the elevated sections in bootstrap?

Having come from Semantic-UI and starting to learn Bootstrap, I must say that despite its widespread popularity, I find Bootstrap a bit lacking compared to what Semantic-UI has to offer in terms of basic stylings. Currently, I am on the lookout for the Bo ...

htmlcssbootstrap-4semantic-ui

Step-by-step guide on creating a draggable navigation bar:

I am encountering an issue creating a droppable menu. I am currently working on Menu 1 but struggling to figure out how to make the drop-down menus appear on the right side. <link href='http://fonts.googleapis.com/css?family=Oswald:300,400' r ...

htmlcss

What is the best way to increase the size of the input field to allow for more typing space?

My query is quite simple. Even when I set the height to 100px, the cursor still starts in the middle of the input box. I want the entire box to be utilized with the cursor starting at the top left corner for a more intuitive paragraph writing experience. ...

htmlcss