更新时间:2022-10-19 13:47:26
您没留给我的时间在对方回答的问题: - )
我是什么意思是,添加另一个层次,多维数据集,命名为基础下。还有在Z平面应用运动:
.base {
宽度:100%;
高度:100%;
位置:绝对的;
-webkit-变换式:preserve-3D;
-moz-变换式:preserve-3D;
-o变换式:preserve-3D;
变换式:preserve-3D;
-webkit-变换:translateZ(-100px);
}
这种方式,演示的所有其他工作正常,你可以轻松地将你想要的多维数据集。
It took me a long time and lots of help from SO to build this cube and get the face to Z:0 and therefore exactly 200x200 pixels. I would like it to rotate so that all faces are 200x200 and in the same position.
Fiddle: http://jsfiddle.net/scottbeeson/phJpS/7/
Relative CSS:
.itemView {
-webkit-perspective:2000;
-webkit-margin-start: 0 !important;
-webkit-margin-before: 0 !important;
-webkit-margin-end: 0 !important;
-webkit-margin-after: 0 !important;
}
.cube {
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
}
.cube figure {
display: block;
position: absolute;
width: 198px;
height: 198px;
border: 0px solid black;
color: white;
margin: 0px;
padding: 0px;
}
.cube.panels-backface-invisible figure {
-webkit-backface-visibility: hidden;
}
.cube .front {
background-color: #555;
border: 1px solid #ccc;
}
.cube .back {
background-color: #555;
border: 1px solid #ccc;
}
.cube .right {
background-color: #555;
border: 1px solid #ccc;
}
.cube .left {
background-color: #555;
border: 1px solid #ccc;
}
.cube .top {
background-color: #555;
border: 1px solid #ccc;
}
.cube .bottom {
background-color: #555;
border: 1px solid #ccc;
}
.cube .front {
-webkit-transform: translateZ(0px );
}
.cube .back {
-webkit-transform: rotateX( -180deg ) translateZ( 200px );
}
.cube .right {
-webkit-transform: rotateY( 90deg ) translateZ( 100px ) translateX(100px);
}
.cube .left {
-webkit-transform: rotateY( -90deg ) translateZ( 100px) translateX(-100px);
}
.cube .top {
-webkit-transform: rotateX( 90deg ) translateZ( 100px ) translateY(-100px);
}
.cube .bottom {
-webkit-transform: rotateX( -90deg ) translateZ( 100px ) translateY(100px);
}
.cube.show-front {
-webkit-transform: translateZ( 0px );
}
.cube.show-back {
-webkit-transform: rotateX( -180deg );
}
.cube.show-right {
-webkit-transform: rotateY( -90deg );
}
.cube.show-left {
-webkit-transform: rotateY( 90deg );
}
.cube.show-top {
-webkit-transform: rotateX( -90deg );
}
.cube.show-bottom {
-webkit-transform: rotateX( 90deg );
}
You didn't left me time to answer in the other question :-)
What I was meaning was to add another level, under the cube, named base. And there apply a movement in the Z plane:
.base {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-100px );
}
This way, all the rest of the demo works, and you can easily move the cube where you want.