我花了很长的时间和大量的帮助下从SO建立这个立方体和得到面对Z:0,因此完全200×200像素。我想它转动,使得所有的面孔都是200×200,并在同一位置。
小提琴: http://jsfiddle.net/scottbeeson/phJpS/7/
相对CSS:
.itemView {
-webkit-观点:2000;
-webkit-保证金启动:0重要的;
-webkit-保证金前:0重要的;
-webkit-缘端:0重要;!
-webkit-保证金后:0重要的;
}
。立方体 {
位置:绝对的;
-webkit-变换式:preserve-3D;
-webkit-转变:-webkit-变换1S;
}
为.cube图{
显示:块;
位置:绝对的;
宽度:198px;
高度:198px;
边界:0px固体黑色;
颜色:白色;
保证金:0px;
填充:0px;
}
.cube.panels-背面不可见的身影{
-webkit-背面能见度:隐藏;
}
为.cube .front {
背景颜色:#555;
边界:1px的固体#ccc;
}
为.cube .back {
背景颜色:#555;
边界:1px的固体#ccc;
}
为.cube .right {
背景颜色:#555;
边界:1px的固体#ccc;
}
为.cube。左{
背景颜色:#555;
边界:1px的固体#ccc;
}
为.cube .TOP {
背景颜色:#555;
边界:1px的固体#ccc;
}
为.cube .bottom {
背景颜色:#555;
边界:1px的固体#ccc;
}
为.cube .front {
-webkit-变换:translateZ(0px);
}
为.cube .back {
-webkit-变换:rotateX(-180deg)translateZ(200像素);
}
为.cube .right {
-webkit-变换:rotateY(90度)translateZ(100像素)translateX(100像素);
}
为.cube。左{
-webkit-变换:rotateY(-90deg)translateZ(100像素)translateX(-100px);
}
为.cube .TOP {
-webkit-变换:rotateX(90度)translateZ(100像素)translateY(-100px);
}
为.cube .bottom {
-webkit-变换:rotateX(-90deg)translateZ(100像素)translateY(100像素);
}
.cube.show前期{
-webkit-变换:translateZ(0px);
}
.cube.show回{
-webkit-变换:rotateX(-180deg);
}
.cube.show右{
-webkit-变换:rotateY(-90deg);
}
.cube.show左{
-webkit-变换:rotateY(90度);
}
.cube.show顶{
-webkit-变换:rotateX(-90deg);
}
.cube.show底{
-webkit-变换:rotateX(90度);
}
解决方案
您没留给我的时间在对方回答的问题: - )
我是什么意思是,添加另一个层次,多维数据集,命名为基础下。还有在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.