Html Css3 3D基本四边旋转_Html_Css_3d_Rotation

Html Css3 3D基本四边旋转

html css 3d

Html Css3 3D基本四边旋转,html,css,3d,rotation,Html,Css,3d,Rotation,我一直在尝试创建一个可以在x轴上旋转的长方体，以便在四个面上分别显示几个不同的图片。然而，我似乎无法让我的代码正常工作。这是： <style type="text/css"> #cube { position:relative; left:20px; top:20px; height:300px; width:300px; -webkit-transition: -webkit-transform 1s linear; } .side { position:absolute;

我一直在尝试创建一个可以在x轴上旋转的长方体，以便在四个面上分别显示几个不同的图片。然而，我似乎无法让我的代码正常工作。这是：

<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>


#立方体{
位置：相对位置；
左：20px；
顶部：20px；
高度：300px；
宽度：300px；
-webkit转换：-webkit转换1s线性；
}
.这边{
位置：绝对位置；
高度：300px；
宽度：300px；
}
.一{
背景颜色：绿色；
-webkit变换：旋转（0度）平移（150像素）；
}
.二{
背景颜色：灰色；
-webkit变换：rotateX（90度）translateZ（150像素）；
}
.三{
背景色：红色；
-webkit变换：rotateX（180度）translateZ（150像素）；
}
.4{
背景色：黑色；
-webkit变换：rotateX（270度）translateZ（150像素）；
}
#转向{
高度：30px；
宽度：30px；
背景颜色：绿色；
利润率：30像素；
}
q=1
度=0
函数turn（）{
var cube=document.getElementById（'one'）；
度=度+90度
如果（q==1）{
cube.style.cssText=“-webkit transform:rotateY（“+（deg）+”deg）；”；
q+=1；
log（“左”+（度））；}
else如果（q==2）{
cube.style.cssText=“-webkit transform:rotateY（“+（deg）+”deg）；”；
q+=1；
log（“右”+（度））；}
else如果（q==3）{
cube.style.cssText=“-webkit transform:rotateY（“+（deg）+”deg）；”；
q+=1；
log（“back”+（deg））；}
else如果（q==4）{
cube.style.cssText=“-webkit transform:rotateY（“+（deg）+”deg）；”；
q=1；
console.log（“前”+（度））；}
}

有没有关于如何让脚本正常工作的想法？

试试这个：

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

代码中缺少的几个概念

CSS类与CSS ID
透视div容器
正确的“墙”分区定位
正确的事件处理

我的朋友

将事件处理程序移动到javascript以使其更加兼容

我的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>

你能给我看一下你的截图或任何你的要求的图片吗……我不知道我是如何回答6个月前的一个问题的，但这里希望《历史年鉴》能找到我的答案。

#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;
}