CODEWITHSUNDEEP
javascripthtmlcss
Karish Karish
Karish Karish

Reputation: 269

CSS rotation Cube UI

i am trying to create 3d menu ui which rotates like a cube, i am struggling the 3d rotating effect. the 2 elements are rotating but i don't know how to show the 3d cube effect. any suggestions how i can make it rotate like a cube

http://jsfiddle.net/dfw3vLag/

    <style>
    body
    {
      background: #333;
      font-family: sans-serif;
      color: #333333;
    }

    ul.list
    {
      list-style-type: none;
      margin: 50px auto;
      padding: 0;
      width: 300px;
    }

    ul.list li
    {
      position: relative;
      height: 40px;
      line-height: 40px;
      margin-bottom: 2px;
    }

    ul.list li div.front
    {
        position:absolute;
        transform: rotateX( 0deg );
        -webkit-transform-style: preserve-3d;
        z-index:2;
        transform-origin: top right;
        background:#FC0; 
        width:90%; 
        height:100%; 
        padding: 0 10px;
        backface-visibility: hidden;
        transition: transform 2s linear 0s;
    }

    ul.list li div.back
    {
        position:absolute;
        transform:  rotateY( -90deg );
        -webkit-transform-style: preserve-3d;
        z-index:1;
        transform-origin: top left;
        background:#FC0345; 
        width:90%; 
        height:100%; 
        padding: 0 10px;
        backface-visibility: hidden;
        transition: transform 2s linear 0s;
    }

    ul.list li:hover
    {
      cursor: pointer;
    }

    ul.list li:hover div.front
    {
      transform:  rotateY( 90deg );
    }
    ul.list li:hover div.back
    {
      transform:   rotateY( 0deg );
    }

    </style>


    <ul class="list">
      <li>
        <div class="back"></div>
        <div class="front">list A</div>
      </li>
      <li>
        <div class="back"></div>
        <div class="front">list B</div>
      </li>
      <li>
        <div class="back"></div>
        <div class="front">list C</div>
      </li>
      <li>
        <div class="back"></div>
        <div class="front">list D</div>
      </li>
    </ul>

Upvotes: 0

Views: 255

Answers (1)

user2570380
user2570380

Reputation:

Not certain what you expect it to look like, but with some help from here, I was able to update your Fiddle to this.

li itself is rotated on hover instead of div.front and div.back separately -- they're just positioned and rotated initially.

Tested on Chrome v39.

The width and padding values were causing the rotated face to be a little off, so I changed them.

body {
  background: #333;
  font-family: sans-serif;
  color: #333333;
}
ul.list {
  list-style-type: none;
  margin: 50px auto;
  padding: 0;
  width: 300px;
}
ul.list li {
  position: relative;
  height: 40px;
  line-height: 40px;
  margin-bottom: 2px;
  transition: transform 1s linear 0s;
  transform-style: preserve-3d;
  transform-origin: left left -145px;
}
ul.list li div.front {
  position: absolute;
  background: #FC0;
  width: 100%;
  height: 100%;
  /* padding: 0 10px; */
  transform: translateZ(145px);
  box-sizing: border-box;
}
ul.list li div.back {
  position: absolute;
  background: #FC0345;
  width: 100%;
  height: 100%;
  /* padding: 0 10px; */
  transform: rotateY(90deg) translateZ(-145px);
}
ul.list li:hover {
  cursor: pointer;
  transform: rotateY(90deg);
}
<body>
  <ul class="list">
    <li>
      <div class="back"></div>
      <div class="front">list A</div>
    </li>
    <li>
      <div class="back"></div>
      <div class="front">list B</div>
    </li>
  </ul>
</body>

Upvotes: 1

Related Questions