html 两个div堆叠,html – 在另一个div下面堆叠div的一角

这可以使用CSS 3D变换来完成.首先,创建一个外部容器并将HTML包装在其中：

#outer {

position: relative;

width: 500px;

height: 400px;

perspective: 1000px;

transform-style: preserve-3d;

}

外部容器具有较大的透视值,以防止元素在旋转时看起来不同.它使用transform-style：preserve-3d;覆盖默认堆叠引擎并将所有内容堆叠在3D上下文中.这可确保所有内容都正确堆叠.

然后,为了使元素正确重叠,只需在Y轴周围给每个元素一个5度的小扭曲：

transform: ... rotateY(5deg);

你的替代元素会产生相反的变化：

transform: ... rotateY(-5deg);

结果是一个在3d中有意义的场景,并且它完全堆叠在物理世界中.

工作,现场的例子：

body {

background-color: #222;

background-repeat: no-repeat;

}

#blueSquare {

position: absolute;

left: 15px;

top: 15px;

width: 50%;

height: 170px;

-webkit-transform: rotateZ(-45deg) rotateY(5deg) ;

transform: rotateZ(-45deg) rotateY(5deg) ;

}

#rightTopblueSquare {

height: 100%;

width: 50%;

position: relative;

left: 50%;

background-color: #7ab9c2;

}

#leftBottomblueSquare {

position: relative;

top: -100%;

height: 100%;

width: 50%;

background-color: #6baaae;

}

/*----------------------------------*/

#greySquare {

width: 50%;

height: 170px;

position: absolute;

bottom: 15px;

left: 15px;

-webkit-transform:rotateZ(45deg) rotateY(-5deg) ;

transform:rotateZ(45deg) rotateY(-5deg) ;

}

#lefTopgreySquare {

height: 100%;

width: 50%;

position: relative;

left: 50%;

background-color: #656f78;

}

#rightButtomgreySquare {

position: relative;

top: -100%;

height: 100%;

width: 50%;

background-color: #313439;

}

/*----------------------------------*/

#redSquare {

width: 50%;

height: 170px;

position: absolute;

right: 15px;

bottom: 15px;

-webkit-transform: rotateZ(-45deg) rotateY(-5deg);

transform: rotateZ(-45deg) rotateY(-5deg);

}

#leftBottomredSquare {

height: 100%;

width: 50%;

position: relative;

left: 50%;

background-color: #a2191d;

}

#rightTopredSquare {

position: relative;

top: -100%;

height: 100%;

width: 50%;

background-color: #d63030;

}

/*----------------------------------*/

#orangeSquare {

width: 50%;

height: 170px;

position: absolute;

right: 15px;

top: 15px;

-webkit-transform: rotateZ(45deg) rotateY(5deg);

transform: rotateZ(45deg) rotateY(5deg);

}

#rightBottomorangeSquare {

height: 100%;

width: 50%;

position: relative;

left: 50%;

background-color: #f42b06;

}

#lefttToporangeSquare {

position: relative;

top: -100%;

height: 100%;

width: 50%;

background-color: #ff6a05;

}

#outer {

position: relative;

width: 500px;

height: 400px;

-webkit-perspective: 1000px;

perspective: 1000px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

leftTop

rightBottom grey sqr

rightTop

LeftBotom blue sqr