css三维聚光灯

CSS3带来了很多新的特性，其中之一就是三维聚光灯效果。

 .container{
        /*设置透视，这个值根据实际需求而定*/
        perspective: 1000px;
    }
    .box{
        /*设置变换过渡效果*/
        transition: transform 1s;
    }
    .box:hover{
        /*设置盒子进行旋转的方式*/
        transform: rotateY(45deg) rotateX(45deg);
        /*设置聚光灯效果*/
        box-shadow: 0 0 100px #fff, 0 0 150px #fff, 0 0 200px #fff, 0 0 250px #0ff;
    } 

以上代码中，我们使用了perspective来设置透视效果，这样就可以实现三维旋转。我们还使用了transition来设置过渡效果，这样在鼠标悬浮时，盒子会平滑地旋转。

最重要的是我们使用了box-shadow来实现聚光灯效果。box-shadow可以接收多个参数，我们使用了四个参数来产生远近不同的聚光灯效果。通过不断调整参数，就可以得到不同的灯光效果。

需要注意的是，不同浏览器对于box-shadow效果的实现可能不同，因此需要根据实际情况进行调整。并且，聚光灯效果会对页面的性能产生一定影响，因此需要控制聚光灯的使用数量和效果。

总结一下，CSS3的三维聚光灯效果可以为页面带来独特的展示效果，但是需要注意对页面的性能影响。