Animating CSS transformations with rotation

Explore the World of HTML and CSS

<div id="section1">
  <div id="box1">WELCOME</div>
</div>

<div id="section2">
  <div id="box2">WELCOME</div>
</div>

CSS Styles for Transformation

#section1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:150px; /* Chrome, Safari, Opera  */
perspective:150px;
}

#box1
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;

-webkit-transform-origin:0%; /* Chrome, Safari, Opera */
-webkit-transform: rotateY(117deg); /* Chrome, Safari, Opera  */
transform: rotateX(-75deg);
}

#section2
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
-webkit-perspective:150px; /* Chrome, Safari, Opera  */
perspective:150px;
}

#box2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;

-webkit-transform-origin:0%; /* Chrome, Safari, Opera */
-webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera  */
transform: rotateX(-75deg);
}

Experimenting with Rotate Transformations

Check out Two Positions

Source code reference: Link. But facing issues in implementation. How to rectify?

-webkit-backface-visibility: visible;
-webkit-transform-origin: 0% 50%;

-webkit-transform: perspective(800px) rotateY(90deg) rotateY(-90deg);
htmlcsscss-animationsrotatetransform

Answer №1

Check out this demo: http://jsfiddle.net/9dqAK/12/

HTML Code

<div id="stage">
  <div id="spinner">
      hello
  </div>
</div>

CSS Styling

@-webkit-keyframes spinner {
     from {
       -webkit-transform: rotateY(0deg);
       -moz-transform: rotateY(0deg);
     }
     to {
        -webkit-transform: rotateY(-360deg);
       -moz-transform: rotateY(-360deg);
    }
}

 #spinner {
     -webkit-transform-origin: 150px 0 0;
     -webkit-animation-name: spinner;
     -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-origin: 150px 0 0;
    -moz-animation-name: spinner;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 6s;
    -moz-transform-style: preserve-3d;
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
 }
 #spinner:hover {
    -webkit-animation-play-state: paused;
  }

Answer №2

Don't forget to specify when the animation should occur. For example, you can set it to trigger on hover.

Add end styles to the :hover pseudo-class and include a transition effect for a smooth animation.

Check out this demo here: http://jsfiddle.net/abhitalks/WEX75/4/

Here is the CSS code:

#div1 {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding:10px;
    border: 1px solid black;
    -webkit-perspective:150px;
}
#div2 {
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    -webkit-transform-origin:0%;
    -webkit-transform: rotateY(117deg);
    transition: 1s all;
}
#div1:hover > #div2 {
    -webkit-backface-visibility: visible;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: perspective(500px) rotateY(0deg);
}

Edit: (Based on Op's comments above)

If you want the animation to happen on page load, you can use jQuery to apply the relevant CSS and wrap that code inside the domready function.

Here is another demo with jQuery implementation: http://jsfiddle.net/abhitalks/WEX75/3/

JS code:

$("#div2").css({
    '-webkit-backface-visibility': 'visible',
    '-webkit-transform-origin': '50% 50%',
    '-webkit-transform': 'perspective(500px) rotateY(0deg)'    
});

Edit 2:

You can add a delay of 2 seconds using transition-delay: 2s;.

Check out Demo 3 with added delay: http://jsfiddle.net/abhitalks/WEX75/5/

Answer №3

Make sure to include the -webkit- prefix in your final transform CSS rule.

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

Tips on creating a React Vite Typescript website that utilizes the entire height and ensures a minimum width

I'm currently working on building a portfolio webpage with React, Vite, and Typescript, but I'm facing an issue where the content is not taking up the full height of the page. I have multiple pages with different lengths of content that I want to ...

htmlcssreactjs

How to place the loading component in the centre of the image using React?

Check out the code and demo below: https://codesandbox.io/s/sparkling-silence-7cv3l I recently implemented the react-image-enlarger component to enable zoom functionality for images, similar to Medium. This component offers an API called renderLoading wh ...

javascripthtmlcssreactjs

How do I position an element at the center of a div using CSS?

Here is some HTML code that I need help with: <div id='nav'><a href ='./?page=1'>1</a> 2 <a href ='./?page=3'>3</a> <a href ='./?page=4'>4</a> <a href ='./?page=5&ap ...

css

Show images exclusively on screens with a smaller resolution

Looking for assistance in modifying the code below to only display the image in mobile view, instead of constantly appearing. <style type="text/javascript> .icon-xyz {float: left; width: 22px;cursor: pointer;background: none;} @me ...

javascripthtmlcssmedia-queries

Can I inspect the HTML source of GWT?

How can I access the HTML source code generated by GWT? Currently, I only see the DIV with a specific ID when viewing the source. Is there a way to view the entire HTML output? Is it possible to design my table in HTML using divs and lists, then wrap it i ...

javahtmlgwt

Guide on attaching an onclick event to a button created with a string in Next.js?

<div onClick={(event) => this.addToCart(event)}> <ReactMarkdownWithHtml children={this.props.customButton} allowDangerousHtml /> </div> In my current situation, I am facing an issue with the code above. The button is being rendered ...

javascripthtmlreactjsnext.js

Choose and output all the tables contained within the database

I've checked my code and I don't see any errors, but for some reason, no data is being displayed on my page. Can anyone offer some help or insight into what may be wrong with my code? Thank you in advance! <?php if(logged_in() === tru ...

phphtmlmysql

Angular material tables are displaying borders that do not extend the full length

I am currently working on designing a visually appealing table. Due to the upcoming content in the matrix section, I am unable to make the table smaller for mobile devices. Therefore, I have added overflow:auto to enable a scroll-bar. The issue I am facin ...

htmlcssangular

Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...

css

How come my justify-content property isn't functioning properly with Flexbox?

I've been racking my brain trying to solve this. The goal is to have all the boxes neatly grouped together, but for some reason there's a massive gap between the main content and footer. Could someone lend a hand? CSS Below is the CSS code rele ...

htmlcssflexbox

Incorporating PHP into Dynamic Variables

I'm curious about how PHP coding can be utilized in PHP variables. Let's say, for instance, I wish to achieve something like: $Start = " IF($lala == "0"){ echo '"; $End = " '; }"; and be able to utilize it as: echo ''.$star ...

phphtml

Guide on Ensuring a Fixed Div Covers the Entire Width of the Screen

Hello everyone, I need some help with formatting my social media widgets on my website. I want them to span the entire width of the screen, align to the right, and remain fixed at the top of the page. You can check out the site totempole.ca for reference. ...

htmlcss

implementing a vertical separator in the main navigation bar

Is there a way to insert a vertical divider after each li element on the main menu? <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a>< ...

htmlcss

Sending Image Data in Base64 Format with Ajax - Dealing with Truncated Data

My current challenge involves sending Base64 image data through ajax to the Server. I've noticed that sometimes all the pictures are successfully sent, but other times only a few make it through. Does anyone have suggestions on how to implement error ...

javascriptajaxhtmlcordova

A guide to utilizing CSS to showcase the content of all four div elements in HTML body simultaneously

Is there a way to use CSS to display the content of all 4 divs in the same place on the HTML body, based on the URL clicked? Only one div should be displayed at a time in the center of the page. For example, if URL #1 is clicked, it should show the conten ...

javascriptjqueryhtmlcss

Is it possible to upload multiple files using JavaScript?

My JavaScript project can be found on GitHub. You can check out a live demo of the project here. The main goal for my HTML Button with id='Multiple-Files' is to enable users to upload multiple files, have them displayed in the console, and then ...

javascripthtmlcss

Adjust the input dimensions to match the length of the text upon loading

I have a jQuery code that is supposed to test the length of text in an input box when the page loads and adjust the size of the input box accordingly. However, I seem to be encountering some issues with my current approach: $("#emailSubject").attr('s ...

jqueryhtmlinput

PHP persistent forms dropdowns and checkbox selection

I am currently working on a PHP form and I am facing an issue with the drop-down boxes and checkboxes. I want them to stay filled even if I don't select something, maintaining the previously entered details while leaving the unfilled parts empty. I ha ...

phphtmlcssformssticky

Why does the CSHTML button containing a JavaScript onclick function only function intermittently?

I've implemented a download button on a webpage that dynamically assigns an ID based on the number of questions posted. Below is the code for the button: <input data-bind="attr: { id: $index() }" type="button" value="Downlo ...

javascripthtmltypescriptrazor

Autonomous boundary for list elements

I have a specific issue that can be observed in this fiddle: http://jsfiddle.net/h0qu4ffv/ where I set the margin-top of one list item to 50px, but all list items end up following this style. Is there a way to give each list item an independent margin, or ...

htmlcsshtml-lists