& lt; !html DOCTYPE html>
& lt; lang=癳n"在
& lt; head>
& lt;元charset=癠TF-8"在
& lt;元name=皏iewport"内容=翱矶?设备宽度,初始=1.0“在
& lt; title> Document
& lt;链接rel=皊tylesheet"href=https://www.yisu.com/zixun/" index.css ">
& lt; style>
html,身体{
高度:100%;
}
。主要{
宽度:300 px;
高度:300 px;
/背景颜色:绿色;/
位置:绝对的,
: 0;
左:0;
: 0;
底:0;
保证金:汽车;
传输格式:preserve-3d;
/过渡:20年代;/
/变换:rotateX(-35度)rotateY(45度);/
变换:rotateX(-15度)rotateY(60度);
}
。盒子{
:绝对的;
: 0;
左:0;
宽度:298 px;
高度:298 px;
背景:rgba (255192203, 0.6);
边界:1 px固体# ffffff;
:浮动;
字体:100 px/298 px的黑体的;
颜色:# fff;
text-align:中心;
}
.box: nth-child (1) {
变换:translateZ (150 px);
}
.box: nth-child (2) {
变换:rotateY(90度)translateZ (150 px);
}
.box: nth-child (3) {
变换:rotateY(-90度)translateZ (150 px);
}
.box: nth-child (4) {
变换:rotateX(90度)translateZ (150 px);
}
.box: nth-child (5) {
变换:rotateX(-90度)translateZ (150 px);
}
.box: nth-child (6) {
变换:translateZ (-150 px);
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癿ain"在
& lt; div类=癰ox"在1 & lt;/div>
& lt; div类=癰ox"在2 & lt;/div>
& lt; div类=癰ox"在3 & lt;/div>
& lt; div类=癰ox"在4 & lt;/div>
& lt; div类=癰ox"在5 & lt;/div>
& lt; div类=癰ox"在6 & lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
