CSS绘制：如何实现简单的3D图形效果

<style>
    .cube {
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateX(45deg) rotateY(45deg);
    }
    
    .face {
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
    }
    
    .front {
        background-color: red;
        transform: translateZ(100px);
    }
    
    .back {
        background-color: green;
        transform: translateZ(-100px) rotateY(180deg);
    }
    
    .top {
        background-color: blue;
        transform: translateY(-100px) rotateX(90deg);
    }
    
    .bottom {
        background-color: yellow;
        transform: translateY(100px) rotateX(-90deg);
    }
    
    .left {
        background-color: orange;
        transform: translateX(-100px) rotateY(-90deg);
    }
    
    .right {
        background-color: purple;
        transform: translateX(100px) rotateY(90deg);
    }
</style>

<div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face left"></div>
    <div class="face right"></div>
</div>

<style>
    .cylinder {
        position: relative;
        width: 200px;
        height: 300px;
        transform-style: preserve-3d;
        transform: rotateX(60deg) rotateY(30deg);
    }
    
    .cylinder::before,
    .cylinder::after {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        background: linear-gradient(to bottom, #ff5f5f, #ff2929);
        border-radius: 50%;
        opacity: 0.8;
    }
    
    .cylinder::before {
        transform: translateZ(-100px);
        top: 50px;
    }
    
    .cylinder::after {
        transform: translateZ(100px);
        bottom: 50px;
    }
</style>

<div class="cylinder"></div>