hooyantsing's Blog

P186_35_perserve-3d呈现三维空间视角

字数统计: 81阅读时长: 1 min
2020/04/23

P186 35 perserve-3d呈现三维空间视角

transform-style

preserve-3d

e9eed42fee3841d4f757db1d8ab47eb8.png

如果立体效果有Z轴参与,需要加入这条属性后,才能看到效果。

1
2
3
4
5
6
7
8
main{
    display: flex;
    border: solid 5px silver;
    width: 400px;
    height: 300px;
    transform-style: preserve-3d;
    transform: perspctive(900px) rotateY(45deg);
}

控制Z轴移动

1
2
3
4
div:nth-child(2){
    background: #2ecc71;
    transform: translateZ(500px);
}
CATALOG