Change CSS transform rotation axis?

问题

It took me a long time and lots of help from SO to build this cube and get the face to Z:0 and therefore exactly 200x200 pixels. I would like it to rotate so that all faces are 200x200 and in the same position.

Fiddle: http://jsfiddle.net/scottbeeson/phJpS/7/

Relative CSS:

.itemView {
    -webkit-perspective:2000;
    -webkit-margin-start: 0 !important;
    -webkit-margin-before: 0 !important;
    -webkit-margin-end: 0 !important;
    -webkit-margin-after: 0 !important;
}

.cube {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
}

.cube figure {
    display: block;
    position: absolute;
    width: 198px;
    height: 198px;
    border: 0px solid black;
    color: white;
    margin: 0px;
    padding: 0px;
}

.cube.panels-backface-invisible figure {
    -webkit-backface-visibility: hidden;
}

.cube .front  {     
    background-color: #555;
    border: 1px solid #ccc; 
}
.cube .back   {
    background-color: #555;
    border: 1px solid #ccc;
}
.cube .right  { 
    background-color: #555;
    border: 1px solid #ccc;
}
.cube .left   { 
    background-color: #555;
    border: 1px solid #ccc;
    }
.cube .top    {
    background-color: #555;
    border: 1px solid #ccc;
    }
.cube .bottom { 
    background-color: #555;
    border: 1px solid #ccc;
    }

.cube .front  {
    -webkit-transform: translateZ(0px );
}
.cube .back   {
    -webkit-transform: rotateX( -180deg ) translateZ( 200px );
}
.cube .right {
    -webkit-transform: rotateY(   90deg ) translateZ( 100px ) translateX(100px);
}
.cube .left {
    -webkit-transform: rotateY(  -90deg ) translateZ( 100px) translateX(-100px);
}
.cube .top {
    -webkit-transform: rotateX(   90deg ) translateZ( 100px ) translateY(-100px);
}
.cube .bottom {
    -webkit-transform: rotateX(  -90deg ) translateZ( 100px ) translateY(100px);
}

.cube.show-front {
    -webkit-transform: translateZ( 0px );
}
.cube.show-back {
    -webkit-transform: rotateX( -180deg );
}
.cube.show-right {
    -webkit-transform: rotateY(  -90deg );
}
.cube.show-left {
    -webkit-transform: rotateY(   90deg );
}
.cube.show-top {
    -webkit-transform: rotateX(  -90deg );
}
.cube.show-bottom {
    -webkit-transform: rotateX(   90deg );
}

回答1:

You didn't left me time to answer in the other question :-)

What I was meaning was to add another level, under the cube, named base. And there apply a movement in the Z plane:

.base {
     width: 100%;
     height: 100%;
     position: absolute;
     -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
          -o-transform-style: preserve-3d;
             transform-style: preserve-3d;
     -webkit-transform: translateZ(-100px );
}

This way, all the rest of the demo works, and you can easily move the cube where you want.

New demo

回答2:

So I kind of hacked it by applying the following translations which basically just move the cube while it's rotating on the wrong axis. It ends up where it should, and I'll use it if I have to, but I'd rather it rotate correctly if anyone else can help.

.cube.show-front {
    -webkit-transform: translateZ( 0px );
}
.cube.show-back {
    -webkit-transform: rotateX( -180deg ) translateZ(200px) translateY(-200px);
}
.cube.show-right {
    -webkit-transform: rotateY(  -90deg ) translateX(-200px);
}
.cube.show-left {
    -webkit-transform: rotateY(   90deg ) translateZ(200px);
}
.cube.show-top {
    -webkit-transform: rotateX(  -90deg ) translateZ(200px);
}
.cube.show-bottom {
    -webkit-transform: rotateX(   90deg ) translateY(-200px);
}

Updated Fiddle: http://jsfiddle.net/scottbeeson/phJpS/8/

来源：https://stackoverflow.com/questions/17367380/change-css-transform-rotation-axis

标签

css3

transform