Question

燮？！

所以我这里有3D立方体标记

<section class="container">
<div class="cube" id="cube">
  <figure class="front" onclick="ClassFront()"></figure>
  <figure class="left"></figure>
  <figure class="bottom"></figure>
</div>
</section>

和CSS

.container {
width: 200px;
height: 200px;
position: relative;
-webkit-perspective: 1000px;
top:50px;
right:-50px;
}

#cube {
  -webkit-transform:rotateX(35deg) rotateY(45deg);
}

.cube figure {
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
  opacity:0.5;
  -webkit-backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
}

.cube .front  {
 -webkit-transform: rotateY(   0deg ) translateZ( 100px );
 background:red;
 }

.cube .left   { -webkit-transform: rotateY( -90deg ) translateZ( 100px ); background:yellow;}

.cube .bottom { -webkit-transform: rotateX( -90deg ) translateZ( 100px ); background:orange;}

.cube, .cube-front, .cube-left, .cube-bottom
{
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translateZ( -100px ); 
}

.cube-front
{
-webkit-transform:rotateX(0) rotateY(0);
  display:block;
}

.cube-left
{
-webkit-transform:rotateX(-90deg) rotateY(0);
  display:block;
}

.cube-bottom
{
-webkit-transform:rotateX(0) rotateY(-90deg);
  display:block;
}

所以我想要的是当一个人徘徊/点击.front，.bottom和.left;立方体旋转到悬浮的图形的脸部。可以通过将'.cube'替换为'.cube-front'，'。cube-bottom'或'.cube-left'来解决这个问题，这是我最后制作的三个css类。

如果有可能悬停和纯CSS 会更方便，但基本javasript也可以......但请排除jquery和 IF 你正在使用javascript，请将我视为100％愚蠢，让它更容易理解。

JSfiddle：http://jsfiddle.net/SwYuk/

Thanx提前！

如何在悬停时旋转我的CSS3立方体或点击其中一个/侧面/儿童？

0 个答案: