Spinning around the Y-axis only causes a one-sided flip

Is there a method to ascertain the direction of rotation for the CSS property transform: rotateY?

I have been attempting to spin this h1 element from one side to the other, but regardless of using a positive or negative sign, it always rotates in the same direction.

h1 {
          display: inline-flex;
          font-size: 50px;
          font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
          letter-spacing: 4px;
          color: white;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
          white-space: nowrap;
          z-index: 3;
          transform-style: preserve-3d;
          animation: rotate 2s infinite;
        }
        
        @keyframes rotate {
          0% {
          }
          33% {
            transform: rotatey(40deg);
          }
          66% {
            transform: rotateY(0);
          }
          100% {
            transform: rotatey(-40deg);
          }
        }
<h1>Example</h1>

Appreciate any assistance on this matter

htmlcssanimationtransform

Answer №1

To achieve the desired rotation effect, create a 180 degree keyframe at the 50% mark in your animation.

@keyframes rotate {
  50% {
    transform: rotateY(180deg);
    }
When rotating with both positive and negative values, they may appear similar. To ensure the correct rotation direction, use degrees exceeding 90 in either direction (+ or -). 
h1 {
  display: inline-flex;
  font-size: 50px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: 4px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  z-index: 3;
  transform-style: preserve-3d;
  animation: rotate 2s infinite linear; /* remove linear if you dont like */
}

@keyframes rotate {
  50% {
  transform: rotateY(180deg);
  }
}
<h1> hello </h1>
I hope this explanation clarifies things for you.

Answer №2

I made a small adjustment to the h1 styling by adding "transform-origin: left;" and tweaking the code slightly. It now rotates to the left side. Hopefully, this clears up any confusion you may have had.

      h1 {
        margin-left: 40%;
        display: inline-flex;
        font-size: 50px;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
        letter-spacing: 4px;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        white-space: nowrap;
        z-index: 3;
        transform-origin: left;
        transform-style: preserve-3d;
        animation: rotate 2s infinite;
      }

      @keyframes rotate {
        100% {
          transform: rotateY(-360deg);
        }
      }
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>
  <body>
    <h1>rotate</h1>
  </body>
</html>

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

What is the method to display just the final 3 characters within a paragraph?

Is there a way to display only the last three characters of a string using either a method or a string method? I consistently have a 13-digit number, but I specifically require showing only the final three digits. Appreciate any assistance provided. Than ...

javascripthtmlcssreactjs

Utilize JQuery to display a modal dialog within a pre-existing modal dialog

In my project, I am currently utilizing JQuery version 2.1.1 and JQuery UI version 1.11.0. My aim is to open a modal dialog within another modal dialog, with the primary (parent) dialog being disabled. While both dialogs have their modal properties set to ...

javascriptjqueryhtmljquery-ui

Display a pop-up directly below the specific row in the table

I am working on creating a table where clicking on a row will trigger a popup window to appear right below that specific row. Currently, the popup is displaying under the entire table instead of beneath the clicked row. How can I adjust my Angular and Bo ...

angularcssbootstrap-4

capturing webpage content with javascript for use in a screenshot

Is there a way to capture a screenshot of a webpage using JavaScript and utilize the canvas tag for this purpose? I attempted to use the html2canvas plugin in the past, but found it lacking in power. I would like to achieve this without relying on extern ...

javascriptjqueryhtmlcanvaswebpage-screenshot

Tips on arranging radio buttons in a vertical layout with bootstrap

I am designing an exam system and I am trying to display the options per line. I attempted using display: block;, but it did not produce the desired result. Here is the snippet of my code. <div class="col-md-10"> <div class="box box-primary"& ...

cssbootstrap-4

Reset the value of the input type file when the modal is closed and ensure that the Save All Changes button is deactivated

Hey there! Working on a simple project and trying to incorporate a neat trick in my app. I want to achieve the following: Clear the input type file value when the modal is closed. Essentially, if the user decides to cancel the upload and closes the modal, ...

javascriptjqueryhtmlbootstrap-4

Java update query experiencing issues

This servlet is designed to add a new user entry into a database table. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String firstname = request.getParameter("firstname"); Str ...

javajqueryhtmlcssjsp

Having issues getting Toggle Switches to function properly in Asp.Net Webforms

I am in need of a toggle switch that can be toggled on or off depending on the user's preference. Here is a CSS code snippet that I have come across in various examples: .switch { position: relative; display: inline-block; width: 60px; hei ...

htmlcssasp.netcheckboxtoggle

Extract HTML href links that correspond to a specific string from a given list of strings using Beautiful Soup

I am currently working on extracting specific URLs from a webpage that contains a list of various links. My goal is to only retrieve the URLs that match certain strings in a predetermined list. These strings are a subset of the text found within the links ...

pythonhtmlweb-scrapingbeautifulsoup

What is the best way to activate a submit button when at least one checkbox is selected?

I checked out Mark's solution on Stack Overflow regarding disabling a button if no checkboxes are selected in Angular2. However, I have more than one array to consider. How can I adjust the code provided in the link for my situation? Alternatively, d ...

htmlangular

"Triggering CSS changes with the click of a

I am developing a basic calendar application in PHP and I would like to dynamically change the style of the <td> block based on user interactions. Specifically, I want to implement a behavior where once the "menuclick" class is active, the other cl ...

phpjavascripthtmlcssclass

Tips for implementing a toggle feature for an ion-card element

I am looking to create a toggle effect on ion-card, where clicking on the card will highlight it until either unclicked or another card is clicked. Similar to this - https://i.sstatic.net/MH5WA.png How can I achieve this effect on ion-card? Here is my H ...

cssangularionic-frameworkionic3

What is the best way to verify the authenticity of a entered captcha code in php?

I'm struggling with validating a captcha code in my registration form. I need to check if the entered captcha code is correct before allowing the user to complete the registration process. If the code is invalid, I want to display an error message. I ...

phphtmlbootstrap-5

Using an image as the background for a three.js scene may cause it to appear distorted

I am struggling with setting an image as a background for my scene without it becoming blurry. I have attempted to use the following code: textureLoader.load("images/background/space.png", function(t) { scene.background = t; }); The problem arises when ...

javascriptcssthree.js

Find a new icon for the website

Currently, I am utilizing PHP to establish my favicon by employing the code snippet below: <link rel="shortcut icon" href="<?php echo "/SysFiles/img/ico/". $favicon; ?>"> While this method functions correctly on Firefox, it does not have the ...

phphtmlgoogle-chromefavicon

Accessing the background page of a Chrome extension while it's in operation

I am in the process of developing my first chrome extension that allows youtube.com/tv to run in the background so it can be accessed easily on a phone or tablet. Everything is working fine, except for the fact that if I want to watch the video and not j ...

javascripthtmljsongoogle-chrome-extensionmanifest

Achieving CSS responsiveness by transforming the divider from vertical to horizontal when the window is resized

Struggling with creating the footer to match the image? As a beginner in CSS and Bootstrap, I admit I lack expertise in this area. My aim is to replicate the footer design for mobile view only, while having a different layout for desktop. The horizontal pa ...

htmlcsstwitter-bootstrap

Tips for integrating bootstrap code within PHP tags

<?php $con=mysqli_connect("localhost","root","","testdatabase"); // Check connection if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $result = mysqli_qu ...

phphtmlsqlbootstrap-4

Switching background image when hovering over a link purely through CSS

I'm attempting to achieve a similar effect on my website, like this example: (scroll down to "we specialize in") I am fairly inexperienced with HTML and CSS, and I'm working within WordPress which adds an extra layer of complexity. I started my ...

htmlcssimagehover

Make the most of your Bootstrap 3 layout by utilizing a full page container that fills both the width and height between a fixed header and

I am currently working on a basic bootstrap page with the Example template from Bootstrap's website. I want the content in the middle to take up the space between the header and footer, while ensuring that both the header and footer remain visible at ...

javascriptjqueryhtmlcsstwitter-bootstrap