The mysterious behavior of CSS3 transforms on intricate rotations

When a div is viewed in perspective and has the transformations rotateY(-90deg) rotateX(-180deg), adding rotateZ(-90deg) to it results in a rotation of +270 degrees instead of -90 degrees.

The new style of the div changes from

transform: rotateY(-90deg) rotateX(-180deg);

to
transform: rotateZ(-90deg) rotateY(-90deg) rotateX(-180deg);

I find it interesting that when you chain three rotations like this 

rotate(90deg) rotate(90deg) rotate(90deg)
, the result is not a rotation of +270 degrees but rather -90 degrees. Why is that?

You can check out the jsFiddle demo here: http://jsfiddle.net/Sdg2W/1/

Do you think this behavior is a bug? I would appreciate any insight on this matter.

csscss-transforms

Answer №1

From my observation, the rotation seems to be functioning properly. It is true that one rotates clockwise while the other rotates counterclockwise. However, what you may have overlooked is that when rotating to +270 degrees, it actually completes 3/4 of a full turn. The example you provided only shows 1/4 of a full turn.

Take a look at this alternative demonstration: [http://jsfiddle.net/vals/Sdg2W/2/]. I have made adjustments to make it easier for you to experiment with.

I believe the confusion arises from the presence of a 180-degree rotation on the Y axis, causing an inversion in the rotation (which may not align with your initial expectations if this were the sole transformation applied).

Answer №2

The issue in question is a known bug that specifically affects Chrome users on Mac operating systems.

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

Update the scrollspy navigation in a div with overflow by toggling the active class

Struggling to implement a navigation menu within a self-scrolling div using html/css/jquery. Looking for the menu items to toggle the active class when in view or at the top of the scrolling div. I'm essentially trying to achieve something like this ...

javascripthtmljquerycss

Hey there, I'm looking to use different CSS fonts on Windows and Mac for the same page on a web application. Can someone please guide me on how to accomplish this?

In order to tailor the font based on the operating system, the following criteria should be followed: For Windows: "Segoe UI" For Mac: "SF Pro" Attempts have been made using the code provided below, but it seems to load before the DOM and lacks persisten ...

javascripthtmlcssreactjswebkit

Preventing default CSS styles in ASP.NET: A step-by-step guide

When working with multiple CSS files for different themes, I noticed that the Login Page is calling one extra CSS file. However, during runtime, some classes from the default CSS are still being used. How can I resolve this issue? ...

asp.netcss

Play button icon is missing in Firefox when using absolute positioning

I'm currently experiencing an issue with my video gallery section. I have both normal and hover versions of a play button positioned above a preview image of a video. However, the play buttons are not visible at all in Firefox. You can view the page h ...

csscss-position

Scrollable content with sticky positioning using CSS3 and JavaScript

I successfully implemented a sidebar using the position: sticky property and it is functioning perfectly. To identify colors in the following text, refer to the script below. When scrolling, the black area remains fixed while the green area sticks to its ...

javascriptjqueryhtmlcss

CSS: Setting the minimum width of a table in your web design

I am facing an issue with a table that should expand to fill 100% of the width, but also need it to respect a min-width rule when I resize my browser window. Unfortunately, setting a min-width directly on the table does not seem to work (tested in Safari&a ...

css

Learn how to use Bootstrap to style your buttons with centered alignment and add a margin in between each one

Looking to center four buttons with equal spacing between them? Here's what you can do: |--button--button--button--button--| Struggling with manual margin adjustment causing buttons to overlap? Check out this code snippet: <div id=""> ...

htmlcssbootstrap-5

Are there alternative methods to retrieve the CSS properties of web elements more effectively than relying on selenium?

I have a situation in my code where I need to retrieve the CSS properties of a large number of web elements. Currently, I am using Selenium and the code looks like this: ... node = browser.find_element_by_xpath(xpath_to_node) return {k: node.v ...

pythonjquerycssseleniumautomated-tests

What is the best way to minify and concatenate multiple CSS files only after converting SCSS to CSS with Gulp?

When attempting to convert my scss files to css files using gulp, I encountered an issue. After writing the scss code, it is easily converted to css. However, I wanted to minify this css and save it in a different folder called 'min'. Within the ...

javascripthtmlcsssassgulp

The word-wrap property does not function properly in the <small> element or any other HTML elements

My code has a small issue with the word-wrap property not working as expected. When I change it to a div element, it works fine but I need to use the small or another specified element. Does anyone have any ideas why the word is not breaking and what could ...

htmlcss

I have found that the CSS property command for multiple columns functions properly in Opera and IE, but unfortunately does not work in Firefox, Chrome, or Safari

When viewing the html code below, it appears as two columns in Opera and IE10, but only one column in Chrome, Safari, and Firefox. Can anyone explain why this is happening? The styling code [ body{column-count: 2} ] seems to only be effective in Opera and ...

htmlcss

Focus on selecting each label within a table using JavaScript

In my current setup, I am attempting to customize radio buttons and checkboxes. Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{ var mark=document.createElement("span"); Array.from(tr.querySelectorAll("input")).forEach((inp,index ...

javascripthtmlcssdom-traversal

Is there a way to smoothly scroll while resizing a div using Resizable Jquery?

I've implemented AdminLTE 3 template and added a resizable div using jQuery-UI. When I expand the div's height, the page doesn't automatically scroll down with it. I don't want to add a scrollbar to the div; instead, I want the entire p ...

phpjqueryhtmlcssjquery-ui

Modify CSS when scrolling, based on the size of the screen

I've implemented this JQuery script to modify elements in my header as the user scrolls. Is there a way to limit these modifications based on the screen size? Here's the code snippet: $(window).scroll(function() { // Once the user has scro ...

jqueryhtmlcssscroll

What could be causing my hover effect to function exclusively on Chromium-based browsers and not on Firefox?

Could use some help with this code snippet .podmenu { display: flex; flex-direction: column; list-style: none; width: 10rem; margin-left: 3rem; margin-bottom: 60px; } .verze { list-style: none; flex-direction: column; ...

htmlcss

What is the best way to connect a relative CSS stylesheet to a master page?

My Java application generates several HTML pages, organized in different directories: html_pages/ | ----> landin_page.html html_pages/details | ----> index1.html html_pages/more_details | ----> index2.html html_pages/css | ...

javascripthtmlcss

Does anyone else have a peculiar problem with css width?

Either I have been designing web pages for an extensive period of time without taking a break or something truly bizarre occurred. <div style="background-color:#0F0; margin:5px; height:5px;"></div> This will generate a lengthy bar with a 5-pi ...

csshtmlwidth

Using JavaScript, aim for a specific element by its anchor headline

I'm looking to make some changes to my navigation menu, specifically hiding the home menu item unless the mobile navigation menu is toggled. Is there a way for me to target the "home" anchor title and apply the active class to it when toggled, similar ...

javascriptjquerycss

Attempting to incorporate a new CSS sub menu alongside the current one

Having trouble with menu styling, I'm new to this and trying to add a sub menu to an existing drop down menu. Check out my JSFiddle This is the CSS code: .menu_main { float: left; width: 60%; } #access .menu { list-style: none; font-weight: normal ...

cssdrop-down-menunavigationsubmenumulti-level

I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...

htmlcss