Question

我一直试图创建一个可以在x轴上旋转的盒子，以显示4个面上每个面上的几个不同的图片。但是，我似乎无法让我的代码工作。这是：

<style type="text/css">

#cube {
position:relative;
left:20px;
top:20px;
height:300px;
width:300px;
-webkit-transition: -webkit-transform 1s linear;
}

.side {
position:absolute;  
height:300px;
width:300px;
}

.one {
background-color:green;
-webkit-transform:rotateX(0deg) translateZ(150px); 
}

.two {
background-color:grey;
-webkit-transform:rotateX(90deg) translateZ(150px); 
}

.three {
background-color:red;
-webkit-transform:rotateX(180deg)  translateZ(150px); 
}

.four {
background-color:black;
-webkit-transform:rotateX(270deg) translateZ(150px); 
}

#turn {
height:30px;
width:30px;
background-color:green;
margin:30px;
}

</style>
<script type="text/javascript">

q = 1
deg = 0
function turn() {

var cube = document.getElementById('one');
deg = deg + 90

if( q == 1 ) {
cube.style.cssText = "-webkit-transform:rotateY(" + (deg) + "deg);";
q += 1;
console.log("left" + (deg));}
else if( q == 2 ) {
cube.style.cssText = "-webkit-transform:rotateY(" + (deg) + "deg);";
q += 1;
console.log("right" + (deg));}
else if( q == 3 ) {
cube.style.cssText = "-webkit-transform:rotateY(" + (deg) + "deg);";
q += 1;
console.log("back" + (deg));}
else if ( q == 4 ) {
cube.style.cssText = "-webkit-transform:rotateY(" + (deg) + "deg);";
q = 1;
console.log("front" + (deg));}

}

</script>
</head>
<body>

<div id="cube">
<div id ="one" class="side two"></div>
<div id="two" class="side three"></div>
<div id="three" class="side four"></div>
<div id="four" class="side one"></div>
</div>

<div id="turn" onclick="turn()"></div>

</body>

关于我怎么不能让这个脚本工作的任何想法？

Answer 1

试试这个：http://css3.bradshawenterprises.com/demos/cubecarousel.php

您需要查看源代码以了解其工作原理，但它应该非常简单。

Answer 2

您的代码中缺少一些概念。

CSS类与CSS ID
透视div容器
正确的'墙'div定位
正确的事件处理

我的JSFiddle

将事件处理程序移至javascript以使其更符合

http://jsfiddle.net/sw7aV/2/

我的HTML

<div id="turn" onclick="turn()"></div>
<div id="container">
    <div id="cube" class="sprite">
        <div class="wall" id="front">front</div>
        <div class="wall" id="back">back</div>
        <div class="wall" id="top">top</div>
        <div class="wall" id="bottom">bottom</div>
        <div class="wall" id="left">left</div>
        <div class="wall" id="right">right</div>
    </div>
</div>

我的CSS

#container {
    float: left;
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #CCCCCC;

    -webkit-perspective: 900;
    -moz-perspective: 900;
    -o-perspective: 900;
    perspective: 900;
}

.sprite {
    width: 100%;
    height: 100%;
    position: absolute;

    text-indent: 0px;

    -webkit-transform:  rotateY(0deg);
    -moz-transform:  rotateY(0deg);
    -o-transform:  rotateY(0deg);
    transform:  rotateY(0deg);

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#cube {
    width: 300px;
    height: 300px;
    -webkit-transition: -webkit-transform 1s linear;
}

#cube .wall {
    display: block;
    position: absolute;
    height: 100%;
    width: 257px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-background-origin: content-box;
    -moz-background-origin: content-box;
    -o-background-origin: content-box;
    background-origin: content-box;
    border: 1px solid #DEDEDE;
    color: white;
}

#cube #front {
    -webkit-transform: rotateX(0deg) rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateX(0deg) rotateY(-90deg) translateZ(150px);
    -ms-transform: rotateX(0deg) rotateY(-90deg) translateZ(150px);
    -o-transform: rotateX(0deg) rotateY(-90deg) translateZ(150px);
    transform: rotateX(0deg) rotateY(-90deg) translateZ(150px);
    width: 300px;
    height: 300px;
}

#cube #back {
    -webkit-transform: rotateX(0deg) rotateY(90deg) translateZ(150px);
    -moz-transform: rotateX(0deg) rotateY(90deg) translateZ(150px);
    -ms-transform: rotateX(0deg) rotateY(90deg) translateZ(150px);
    -o-transform: rotateX(0deg) rotateY(90deg) translateZ(150px);
    transform: rotateX(0deg) rotateY(90deg) translateZ(150px);
    width: 300px;
    height: 300px;
}

#cube #top {
    -webkit-transform: rotateX(90deg) rotateY(0deg) translateZ(150px);
    -moz-transform: rotateX(90deg) rotateY(0deg) translateZ(150px);
    -ms-transform: rotateX(90deg) rotateY(0deg) translateZ(150px);
    -o-transform: rotateX(90deg) rotateY(0deg) translateZ(150px);
    transform: rotateX(90deg) rotateY(0deg) translateZ(150px);
    width: 300px;
    height: 300px;
}

#cube #bottom {
    -webkit-transform: rotateX(-90deg) rotateY(0deg) translateZ(150px);
    -moz-transform: rotateX(-90deg) rotateY(0deg) translateZ(150px);
    -ms-transform: rotateX(-90deg) rotateY(0deg) translateZ(150px);
    -o-transform: rotateX(-90deg) rotateY(0deg) translateZ(150px);
    transform: rotateX(-90deg) rotateY(0deg) translateZ(150px);
    width: 300px;
    height: 300px;
}

#cube #left {
    -webkit-transform: rotateX(0deg) rotateY(180deg) translateZ(150px);
    -moz-transform: rotateX(0deg) rotateY(180deg) translateZ(150px);
    -ms-transform: rotateX(0deg) rotateY(180deg) translateZ(150px);
    -o-transform: rotateX(0deg) rotateY(180deg) translateZ(150px);
    transform: rotateX(0deg) rotateY(180deg) translateZ(150px);
    width: 300px;
    height: 300px;
}

#cube #right {
    -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(150px);
    -moz-transform: rotateX(0deg) rotateY(0deg) translateZ(150px);
    -ms-transform: rotateX(0deg) rotateY(0deg) translateZ(150px);
    -o-transform: rotateX(0deg) rotateY(0deg) translateZ(150px);
    transform: rotateX(0deg) rotateY(0deg) translateZ(150px);
    width: 300px;
    height: 300px;
}

Css3 3D Basic 4面旋转

2 个答案: