css3转换以模拟当前打开

这是我的代码：

/*开放式多维数据集*/
礼品部{
边际上限：0；
}
#起源{
-webkit透视图：2500px；
-webkit透视图来源：50%250px；
透视图：2500px；
透视原点：50%250px；
利润率：200px自动；
宽度：100%；
浮动：左；
}
#原点#Ycube，#原点#Zcube{
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
#原点#立方体{
位置：相对位置；
保证金：0自动；
身高：613px；
宽度：604px；
-webkit变换样式：保留-3d；
-webkit转换源：50%100px 0；
变换样式：保留-3d；
变换原点：0；
}
#立方体，一个{
-webkit变换：rotateX（90度）translateZ（200像素）；
变换：rotateX（90度）translateZ（200像素）；
}
#起源，脸{
位置：绝对位置；
身高：582px；
宽度：600px；
-webkit背面可见性：可见；
背面可见性：可见；
边框：1px#aaa实心；
}
#立方体，两个{
-webkit转换：translateZ（286px）；
transform:translateZ（286px）；
过渡：所有1都放松；
}
#立方体：悬停，两个{
变换：translateX（0px）translateY（0px）translateZ（300px）rotateX（-90度）rotateY（0度）rotateZ（0度）；
-webkit-transform-origin-x:0；
-webkit-transform-origin-y:100%；
背景：红色；
}
#立方体，三个{
-webkit变换：旋转（90度）平移（300像素）；
变换：旋转（90度）平移（300像素）；
背景色：rgba（255,0,0,0.5）；
过渡：所有1都放松；
}
#立方体：悬停，三{
/*变换：旋转（90度）平移（300像素）*/
变换：translateX（0px）translateY（0px）translateZ（-306px）rotateX（-90度）rotateY（0度）rotateZ（90度）；
-webkit-transform-origin-x:100%；
-webkit-transform-origin-y:100%；
}
#立方体，四个{
-webkit变换：旋转（0度）平移（-290px）；
-moz变换：旋转（0度）平移（-290px）；
-ms变换：旋转（0度）平移（-290px）；
变换：旋转（0deg）translateZ（-290px）；
背景色：rgba（255,0,0,0.5）；
过渡：所有1都放松；
}
#立方体：悬停，四个{
变换：translateX（0px）translateY（0px）translateZ（-300px）rotateX（90度）rotateY（-0度）rotateZ（0度）；
-webkit-transform-origin-x:0%；
-webkit-transform-origin-y:100%；
}
#五块{
-webkit变换：旋转（-90度）translateZ（300px）；
变换：旋转（-90度）平移Z（300px）；
背景色：rgba（255,0,0,0.5）；
过渡：所有1都放松；
}
#立方体：悬停，五点{
/*变换：旋转（-90度）平移Z（300px）*/
变换：translateX（0px）translateY（0px）translateZ（-306px）rotateX（-90度）rotateY（0度）rotateZ（-90度）；
-webkit-transform-origin-x:0%；
-webkit-transform-origin-y:100%；
}
#六块{
-webkit变换：rotateX（-90度）translateZ（292px）rotate（180度）；
变换：rotateX（-90度）translateZ（292px）rotate（180度）；
背景色：rgba（255,0,0,0.5）；
}

历法

您只需通过以下方式指定旋转的参数：

.face{transform-origin:50% 100%;}
.six{transform-origin:50% 50%;}

这样，所有4个面将围绕底部边缘旋转，并保持与底部面的连接：

/*开放式多维数据集*/
.face{变换原点：50%100%；}
.six{变换原点：50%50%；}
礼品部{
边际上限：0；
}
#起源{
-webkit透视图：2500px；
-webkit透视图来源：50%250px；
透视图：2500px；
透视原点：50%250px；
利润率：200px自动；
宽度：100%；
浮动：左；
}
#原点#Ycube，#原点#Zcube{
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
#原点#立方体{
位置：相对位置；
保证金：0自动；
身高：613px；
宽度：604px；
-webkit变换样式：保留-3d；
-webkit转换源：50%100px 0；
变换样式：保留-3d；
变换原点：0；
}
#立方体，一个{
-webkit变换：rotateX（90度）translateZ（200像素）；
变换：rotateX（90度）translateZ（200像素）；
}
#起源，脸{
位置：绝对位置；
身高：582px；
宽度：600px；
-webkit背面可见性：可见；
背面可见性：可见；
边框：1px#aaa实心；
}
#立方体，两个{
-webkit转换：translateZ（286px）；
transform:translateZ（286px）；
过渡：所有1都放松；
}
#立方体：悬停，两个{
变换：translateX（0px）translateY（0px）translateZ（300px）rotateX（-90度）rotateY（0度）rotateZ（0度）；
-webkit-transform-origin-x:0；
-webkit-transform-origin-y:100%；
背景：红色；
}
#立方体，三个{
-webkit变换：旋转（90度）平移（300像素）；
变换：旋转（90度）平移（300像素）；
背景色：rgba（255,0,0,0.5）；
过渡：所有1都放松；
}
#立方体：悬停，三{
/*变换：旋转（90度）平移（300像素）*/
变换：translateX（0px）translateY（0px）translateZ（-306px）rotateX（-90度）rotateY（0度）rotateZ（90度）；
-webkit-transform-origin-x:100%；
-webkit-transform-origin-y:100%；
}
#立方体，四个{
-webkit变换：旋转（0度）平移（-290px）；
-moz变换：旋转（0度）平移（-290px）；
-ms变换：旋转（0度）平移（-290px）；
变换：旋转（0deg）translateZ（-290px）；
背景色：rgba（255,0,0,0.5）；
过渡：所有1都放松；
}
#立方体：悬停，四个{
变换：translateX（0px）translateY（0px）translateZ（-300px）rotateX（90度）rotateY（-0度）rotateZ（0度）；
-webkit-transform-origin-x:0%；
-webkit-transform-origin-y:100%；
}
#五块{
-webkit变换：旋转（-90度）translateZ（300px）；
变换：旋转（-90度）平移Z（300px）；
背景色：rgba（255,0,0,0.5）；
过渡：所有1都放松；
}
#立方体：悬停，五点{
/*变换：旋转（-90度）平移Z（300px）*/
特兰