Try applying CSS rotate3d to a div that is already rotated

Having trouble with the axis of a rotated div.

Currently, the diamond rotates within its sides and I want it to rotate from the top center.

Check out this example: http://jsfiddle.net/DtQd8/

HTML

<div class="diamond">
    <div class="diamondIn">
        <div class="front"></div>
        <div class="back"></div>
    </div>
</div>

CSS

.diamond
{
height: 150px;
width: 150px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: absolute;
}

.diamondIn
{
height: 150px;
width: 150px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
float: left;
}

.diamondIn:hover
{
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
}

.diamondIn .front,
.diamondIn .back
{
top: 0;
left: 0;
height: 150px;
width: 150px;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}

.diamondIn .front
{
z-index: 2;
background: #00ff00;
}

.diamondIn .back
{
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
background: #ff0000;
}

Anyone have suggestions on how to achieve this?

htmlcsscss-transitions

Answer №1

The conversion of the outer div alters the coordinate system for inner div elements (detailed explanation can be found here). This is why the inner divs rotate around their own rotated axes.

Wouldn't it make more sense/simple to apply a 'static' transformation to the inner divs and then dynamically rotate the entire structure in untransformed coordinates?

I made some adjustments to your JSFiddle, attempting to clarify all the transformations taking place there through comments: jsfiddle.net/DtQd8/2/. Did I correctly interpret the objective? :)

Answer №2

I have made some adjustments to your CSS code. Specifically, I have modified the "Transform" property to rotate at a +45 degree angle and updated the coordinates for 3D effects. Below is the revised code:

.diamond
{
height: 150px;
width: 150px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: absolute;
}

.diamondIn
{
height: 150px;
width: 150px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
float: left;
}

.diamondIn:hover
{
-webkit-transform: rotate3d(150,150,0,180deg);
-moz-transform: rotate3d(150,150,0,180deg);
transform: rotate3d(150,150,0,180deg);
}

.diamondIn .front,
.diamondIn .back
{
top: 0;
left: 0;
height: 150px;
width: 150px;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}

.diamondIn .front
{
z-index: 2;
background: #00ff00;
}
.diamondIn .back
{
-webkit-transform: rotate3d(150,150,0,180deg);
-moz-transform: rotate3d(150,150,0,180deg);
transform: rotate3d(150,150,0,180deg);
background: #ff0000;
}

Answer №3

You must include properties for left, top, and margin-left

.diamond
{
height: 150px;
width: 150px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: absolute;
top:40px;
left:50%;
margin-left:-75px;
}

Check out the live example here: http://jsfiddle.net/DtQd8/1/

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

Steps for shaping the dialog of Material-UI to fit an image

Is there a way to adjust the size of the dialog box to match that of the image? https://i.stack.imgur.com/pXtXg.png I've also tried changing the background color to transparent without success. https://i.stack.imgur.com/Hjx2x.png ...

htmlcssreactjsdialogmaterial-ui

Trouble with virtual canvas when attempting to put image data

I am new to the virtual canvas concept and I'm having trouble with the code below. Can anyone help me figure out why it's not working? <script type="text/javascript"> $(document).ready(function () { var c1 = docu ...

javascripthtmlcanvasoff-screen

Modify CSS progress circle to update the percentage of completion

I stumbled upon this code snippet, and although it works flawlessly, I encountered a limitation - I can only set the percentage to 25, 50, or 75. If I try to increase it to 85%, the circle fills up completely. Does anyone have any suggestions on how to res ...

htmlcss

Looking to create circular text using HTML, CSS, or JavaScript?

https://i.sstatic.net/pnu0R.png Is there a way to generate curved text in HTML5, CSS3, or JavaScript similar to the image linked above? I've experimented with transform: rotate(45deg); but that just rotates the text without curving it. Additionally, ...

javascriptcsstext

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

My goal is to create a unique e-commerce checkout page design. Each panel would be opened sequentially, with the next panel unfreezing when the action button of the current panel is clicked. However, I seem to be making a mistake as it is not working as in ...

javascriptjquerycsstwitter-bootstrap

Is there a clash between the jQuery slider moving up and down and the Twitter widget

Check out this jsFiddle code that functions well until a Twitter widget is inserted. The code is designed to slide content up and down when the link "click here" is clicked. However, once a default code from get a Twitter widget is added in this version ( ...

jqueryhtmlcsstwitterwidget

Create a moving background gradient with styled-components

Currently, I am working on setting the background of the <Paper /> component using Material-UI version 1.0.0-beta.25 to display a gradient of colors. The colors are dynamically added by clicking the Add button and selecting one from the color picker. ...

cssreactjsanimationmaterial-uistyled-components

What is the best way to display ng-repeat elements in a horizontal layout

Looking for a way to display thumbnails horizontally using ng-repeat in AngularJS and Bootstrap. Any ideas on how to achieve this with CSS or Bootstrap? <div class="row"> <ul class="col-md-4" id="phones"> <li class="thumbnail" ...

htmlcssangularjstwitter-bootstrapangularjs-ng-repeat

Send a POST form from my website to another website and retrieve the data from the remote server

My website, example.com, includes a web HTML form that leads to another site where the results are currently displayed. I want to retrieve these results from the other website using PHP or some other method and showcase them on my own site. However, the fo ...

javascriptphpjqueryhtmlcss

What does "SPAN CLASS="SKYPE_C2C_FREE_TEXT_SPAN" refer to?

While browsing a website, I noticed the use of this HTML class surrounding customer address information entered in a form. I am curious about the purpose of these tags - perhaps they trigger a specific behavior on Skype? Unfortunately, I couldn't find ...

htmlcssskype

When using NVDA (Accessibility Screen Reader) on Google Chrome, chances are that the text in a Bootstrap Modal Dialog may not be

To Test Accessibility: Click here for the NVDA Screen Reader test For 508/accessibility compliance, I am running tests using the NVDA Screen Reader. Currently, I have implemented "Info Dialog" boxes through Bootstrap Modal. While Firefox correctly reads ...

htmltwitter-bootstrapgoogle-chromesection508nvda

No information was retrieved from the Wikipedia server after sending an HTTP request

I have been trying to fetch HTML using code. It works perfectly fine when fetching from "http://www.google.com," but when attempting to fetch from "http://en.wikipedia.org/w/api.php," I am not getting any results. Any ideas on what might be causing this i ...

javahtmlhttp

Javascript use of overlaying dynamically generated Canvases

Currently, I am developing a game to enhance my skills in HTML5 and Javascript. In the beginning, I had static canvases in the HTML body but found it difficult to manage passing them around to different objects. It is much easier for me now to allow each ...

javascripthtmlcanvashtml5-canvas

What specific features does CSS3 offer in terms of background-size properties?

Let's delve into my knowledge: $, like in font-size: 14$; em, as in margin: 2em; What other units are out there? ...

css

Looking for a solution to toggle the visibility of a div based on whether search results are found or not using JavaScript

Running this code <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Searc ...

javascripthtmlcss

Resizing a scrollable list using React Refs and UseLayoutEffect

Essentially, my issue stems from having a scrollable list with a set maximum height of '100vh'. I also have a detail card beside the list that contains accordion components. When one of these accordions is expanded, it increases the height of the ...

javascriptcssreactjsreact-hooksmaterial-ui

An instructional guide on utilizing Python to extract the URLs of companies from a LinkedIn search

I'm having an issue extracting company profile URLs from a LinkedIn search as I keep getting a "not found" message. Despite my code running smoothly, the problem persists. Here is my code: import requests import csv import time import numpy from bs4 ...

pythonhtmlselenium-webdriverbeautifulsoupspring-social-linkedin

obtain an inner element within a container using the class name in a div

I am attempting to locate a span element with the class of main-tag within a nested div. However, I want to avoid using querySelector due to multiple elements in the HTML file sharing the same class and my preference against using IDs. I realize there mig ...

javascripthtml

Packages have gone astray post node_modules scrub

I encountered an issue with npm run watch getting stuck at 10%, so I took the step of deleting the node_modules directory and package-lock.json. However, it seems that I may have installed modules using npm install without the --save-dev option. Even after ...

cssvue.jsnpm

What does Event.target.id return - the HTML id value or the HTML name value?

HTML Form Example: <form id="form-product-add" style="display: inline;"> <input name="csrf" type="hidden" value="<?= $this->csrf; ?>"> <input type="hidden" name="a ...

javascriptphphtmleventstarget