CODEWITHSUNDEEP
htmlcsscss-transitions
MegaKaskaskas
MegaKaskaskas

Reputation: 129

Use CSS rotate3d on already rotated div

I have problem with axis of already rotated div.

Right now the diamond rotates within sides and I want to rotate by top center of it.

Here's an 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;
}

Does anyone have any idea?

Upvotes: 3

Views: 1525

Answers (3)

Vikas Singhal
Vikas Singhal

Reputation: 20

I have made small edits to your CSS. I have changed the "Transform" property to +45 degree. Along with this also changed the coordinates for 3D. Below is the updated 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;
}

Upvotes: 1

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

The transformation of the outer div changes the coordinate system for inner divs (good explanation here). That's why the inner divs rotate around the axis that are already rotated themselves.

Wouldn't it be better/easier to apply the 'static' transformation to the inner divs and dynamically rotate the whole construction, in non-transformed coordinates?

I edited your JSFiddle a bit, trying to explain all the transformations happening there in the comments: jsfiddle.net/DtQd8/2/. Have I guessed the task? :)

Upvotes: 2

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

you need to add 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;
}

demo http://jsfiddle.net/DtQd8/1/

Upvotes: 0

Related Questions