CODEWITHSUNDEEP
htmlcss
Dhruv Chadha
Dhruv Chadha

Reputation: 1177

RotateX in CSS cube not working properly

I was learning to create a cube rotating effect. On hover if i replace the rotateX by rotateY the cube is rotating around Y axis centered. But when rotateX is present, the cube is not rotating about X axis centered. How do i implement proper rotation of cube?

#container {
  perspective: 1000px;
  perspective-origin: 0 0;
}
#cube {
  position: relative;
  top: 100px;
  left: 100px;
  width: 200px;
  transform-style: preserve-3d;
  transition: transform 2s;
  transform-origin: 50% 50%;
}
#cube div {
  position: absolute;
  width: 200px;
  height: 200px;
}
#front {
  transform: rotateY(   0deg ) translateZ( 100px );
  background-color: rgba(0,34,62,0.3);
}
#right {
  transform: rotateY(  90deg ) translateZ( 100px );
  background-color: rgba(110,34,162,0.3);
}
#back {
  transform: rotateY( 180deg ) translateZ( 100px );
  background-color: rgba(20,4,62,0.3);
}
#left {
  transform: rotateY( -90deg ) translateZ( 100px );
  background-color: rgba(80,134,2,0.3);
}
#top {
  transform: rotateX(90deg) translateZ(100px);
}
#bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
#cube:hover {
  transform: rotateX(360deg);
}
<html>
  <body>
    <div id="container">
      <div id="cube">
        <div id="front">
          <h1>1</h1>
        </div>
        <div id="right">
          <h1>2</h1>
        </div>
        <div id="back">
          <h1>3</h1>
        </div>
        <div id="left">
          <h1>4</h1>
        </div>
        <div id="top">
          <h1>5</h1>
        </div>
        <div id="bottom">
          <h1>6</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 5

Views: 89

Answers (2)

thepio
thepio

Reputation: 6253

You need to set the transform origin according to the div size (one side of the cude). So I just changed the transform-origin: 100px 100px; for the cube like this:

#container {
  perspective: 1000px;
  perspective-origin: 0 0;
  height: 500px;
}
#cube {
  position: relative;
  top: 100px;
  left: 100px;
  width: 200px;
  transform-style: preserve-3d;
  transition: transform 2s;
  transform-origin: 100px 100px;
}
#cube div {
  position: absolute;
  width: 200px;
  height: 200px;
}
#front {
  transform: rotateY(   0deg ) translateZ( 100px );
  background-color: rgba(0,34,62,0.3);
}
#right {
  transform: rotateY(  90deg ) translateZ( 100px );
  background-color: rgba(110,34,162,0.3);
}
#back {
  transform: rotateY( 180deg ) translateZ( 100px );
  background-color: rgba(20,4,62,0.3);
}
#left {
  transform: rotateY( -90deg ) translateZ( 100px );
  background-color: rgba(80,134,2,0.3);
}
#top {
  transform: rotateX(90deg) translateZ(100px);
}
#bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
#cube:hover {
  transform: rotateX(360deg);
}
<html>
  <body>
    <div id="container">
      <div id="cube">
        <div id="front">
          <h1>1</h1>
        </div>
        <div id="right">
          <h1>2</h1>
        </div>
        <div id="back">
          <h1>3</h1>
        </div>
        <div id="left">
          <h1>4</h1>
        </div>
        <div id="top">
          <h1>5</h1>
        </div>
        <div id="bottom">
          <h1>6</h1>
        </div>
      </div>
    </div>
  </body>
</html>

It did not work with percentage since the cube is not "straight" sided and the container uses perspective.

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29239

If I understand you correctly, you just set the #cube's height to 200px

#container {
  perspective: 1000px;
  perspective-origin: 0 0;
}
#cube {
  position: relative;
  top: 100px;
  left: 100px;
  width: 200px;
  height:200px;
  transform-style: preserve-3d;
  transition: transform 2s;
  transform-origin: 50% 50%;
}
#cube div {
  position: absolute;
  width: 200px;
  height: 200px;
}
#front {
  transform: rotateY(   0deg ) translateZ( 100px );
  background-color: rgba(0,34,62,0.3);
}
#right {
  transform: rotateY(  90deg ) translateZ( 100px );
  background-color: rgba(110,34,162,0.3);
}
#back {
  transform: rotateY( 180deg ) translateZ( 100px );
  background-color: rgba(20,4,62,0.3);
}
#left {
  transform: rotateY( -90deg ) translateZ( 100px );
  background-color: rgba(80,134,2,0.3);
}
#top {
  transform: rotateX(90deg) translateZ(100px);
}
#bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
#cube:hover {
  transform: rotateX(360deg);
}
<html>
  <body>
    <div id="container">
      <div id="cube">
        <div id="front">
          <h1>1</h1>
        </div>
        <div id="right">
          <h1>2</h1>
        </div>
        <div id="back">
          <h1>3</h1>
        </div>
        <div id="left">
          <h1>4</h1>
        </div>
        <div id="top">
          <h1>5</h1>
        </div>
        <div id="bottom">
          <h1>6</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 2

Related Questions