8

I have created css-cube and its rotating on :hover.

But Its rotation is based on one side of cube!

I want to rotate it from its center, like in this example. I was trying property but not got desired result.

I have also tried placing one middle plane inside cube but hover is not working in that situation!

.contain {
    width: 300px;
    height: 300px;
    -webkit-perspective: 500px;
    perspective: 500px;
    position: absolute;
}
.main {
    position:relative;
    width:100px;
    height:100px;
    margin:100px 100px;
    background:#07a;
    overflow:visible;
    transition: all linear,transform cubic-bezier(0.4, 0.25, 0.14, 1.5),background cubic-bezier(0.4, 0.25, 0.14, 1.5);
    transition-duration: 700ms;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.main:hover{
    transform:rotateY(180deg);
}

.top, .right, .left, .bottom,.lid{
    position:absolute;
    width:100px;
    height:100px;
    z-indexd:999;
    transition:  all 1s ease;
}
.top {
    background:crimson;
    top:-100px;
    transform-origin : 50% 100%;
    transform:rotateX(-90deg);
}
.bottom {
    background:crimson;
    bottom:-100px;
    transform-origin :100% 0%;
    transform:rotateX(90deg);
}
.left {
    background:#ccc;
    left:-100px;
    transform-origin :100% 0%;
    transform:rotateY(90deg);
}
.right {
    background:#ccc;
    right:-100px;
    transform-origin : 0% 0%;
    transform:rotateY(-90deg);
}
.lid {
    background:#07a;
    transform: translateZ(170px);
    transform-origin : 0% 0%;
    transform:translateZ(100px);
}
<div class="contain">
            <div class="main">
                <div class="lid"></div>
                <div class="top"></div>
                <div class="right"></div>
                <div class="left"></div>
                <div class="bottom"></div>
            </div>
        </div>

1
  • 1
    Come online I am up. I saw your edit here 2 mins ago. Dec 27, 2014 at 12:52

3 Answers 3

3

The problem is that you need to set the transform origin in the center of the cube, and the cube is a 3d element. You are missing the 3rd dimension !

So it should be

transform-origin: center center 50px;

since your cube side is 100px

.contain {
    width: 300px;
    height: 300px;
    -webkit-perspective: 500px;
    perspective: 500px;
    position: absolute;
}
.main {
    position:relative;
    width:100px;
    height:100px;
    margin:100px 100px;
    background:#07a;
    overflow:visible;
    transition: all linear,transform cubic-bezier(0.4, 0.25, 0.14, 1.5),background cubic-bezier(0.4, 0.25, 0.14, 1.5);
    transition-duration: 700ms;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-origin: center center 50px;
}

.main:hover{
    transform:rotateY(180deg);
}

.top, .right, .left, .bottom,.lid{
    position:absolute;
    width:100px;
    height:100px;
    z-indexd:999;
    transition:  all 1s ease;
}
.top {
    background:crimson;
    top:-100px;
    transform-origin : 50% 100%;
    transform:rotateX(-90deg);
}
.bottom {
    background:crimson;
    bottom:-100px;
    transform-origin :100% 0%;
    transform:rotateX(90deg);
}
.left {
    background:#ccc;
    left:-100px;
    transform-origin :100% 0%;
    transform:rotateY(90deg);
}
.right {
    background:#ccc;
    right:-100px;
    transform-origin : 0% 0%;
    transform:rotateY(-90deg);
}
.lid {
    background:#07a;
    transform: translateZ(170px);
    transform-origin : 0% 0%;
    transform:translateZ(100px);
}
<div class="contain">
            <div class="main">
                <div class="lid"></div>
                <div class="top"></div>
                <div class="right"></div>
                <div class="left"></div>
                <div class="bottom"></div>
            </div>
        </div>

2
  • thanks man! that works now! transform-origin is always confusing to me! please explain how it works in this example if you have time! Dec 26, 2014 at 10:53
  • 2
    Happy that it helped! I already explained how it works at the beginning of the answer. The transform origin must be at the center of the cube, otherwise when you rotate it it looks weird. And you had set it to the center in x and y, but not in the z coordinate. Since your element doesn't have a depth, center won't work here, you need to set it explicitly (50px)
    – vals
    Dec 26, 2014 at 11:01
1

I added a translateZ to move the rotation axis, it looks a little more centered but still not like Desandro's ex.,

I read the documentation and I think you should checkout this! it explains a little bit about orgins and perspectives...

EDIT1: integrated translateZ instead of transform origin (now it's perfect!!)

.contain {
    width: 300px;
    height: 300px;
    -webkit-perspective:666px;
    perspective: 666px;
    position: absolute;
}
.main {
    position:relative;
    width:100px;
    height:100px;
    margin:100px 100px;
    background:#07a;
    overflow:visible;
    transition: all 1s ease;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform:translateZ(-50px)
   
    
}

.main:hover{
    transform:  translateZ(-50px) rotateY(180deg);
    
    
}

.top, .right, .left, .bottom,.lid,.front{
    position:absolute;
    width:100px;
    height:100px;
    z-index:999;
    transition:  all 1s ease;
}
.front{
    background:yellow;
    transform:rotateY( 0deg ) translateZ( 50px );
}
.left {
    background:red;
    transform:rotateY(90deg) translateZ( 50px );
}
.right {
    background:purple;
    right:-100px;
    //transform-origin : 0% 0%;
    transform:rotateY(-90deg) translateZ( 150px );
}
.lid {
    background:green;
    transform:rotateY(180deg) translateZ( 50px );
   
}
<div class="contain">
            <div class="main">
                <div class="front"></div>
                <div class="lid"></div>
                <div class="right"></div>
                <div class="left"></div>
             </div>
        </div>

BTW CSS-transformations rock!!

0

I tried Adding "translateZ(-70px)" in the ".main:hover" and I think it's rotating centered.

With this will make when your cube is rotating make the translate some pixels to left and make feeling it's centered.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.