css中2d 3d引擎 |asp导航栏css

/* 创建一个2D的盒子 */
.box {
width: 100px;
height: 100px;
background-color: lightblue;
padding: 20px;
margin: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 创建一个3D盒子 */
.box-3D {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
perspective: 800px;
transform-style: preserve-3d;
}
.box-3D span {
position: absolute;
}
/* 给3D盒子添加旋转效果 */
.box-3D span:first-child {
background-color: darkblue;
width: 100%;
height: 100%;
transform-origin: center;
transform: rotateY(0deg);
transition: transform 1s;
}
.box-3D:hover span:first-child{
transform: rotateY(180deg);
}
/* 给3D盒子添加缩放效果 */
.box-3D span:nth-child(2) {
background-color: lightgreen;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
transform-origin: center;
transform: scale(1);
transition: transform 1s;
}
.box-3D:hover span:nth-child(2){
transform: scale(1.5);
}
/* 给3D盒子添加倾斜效果 */
.box-3D span:last-child {
background-color: purple;
width: 80%;
height: 80%;
bottom: 10%;
right: 10%;
transform-origin: center;
transform: skewY(0deg);
transition: transform 1s;
}
.box-3D:hover span:last-child{
transform: skewY(-10deg);
}

在上面的代码中，大家创建了一个2D的盒子和一个3D的盒子，分别使用了不同的属性来实现不同的效果。3D盒子中大家使用了perspective、transform-style、transform等属性来完美地展示出3D效果。如果你想要使用CSS制作令人惊叹的2D或3D效果，这些属性是不可或缺的。