【CSS】记踩坑-图片3D旋转设置景深perspective

在练习CSS3图片3D旋转的时候，为了使图片更有旋转的立体效果，设置了景深，但发现图片的旋转角度发生了偏移。

设置景深之前：

CSS

<style>
    div{
      
      
        margin-top: 200px;   /*上外边距200px*/
        margin-left: 200px;  /*左外边距200px*/
    }
    img{
      
      
        width: 300px;  /*图片宽度*/
        transform: rotateX(20deg); /*绕X轴旋转，180deg可实现图片垂直翻转*/
    }
</style>

HTML

<div>
    <img src="dada.jpg"  alt="">
</div>

效果如下：
图片随绕X轴旋转了20°，但因为没有设置景深，很难看出效果。

设置景深：

景深需要加在图片父元素上

CSS

<style>
    div{
      
      
        perspective: 400px;  /*为图片父元素设置景深*/
        margin-top: 200px;   /*上外边距200px*/
        margin-left: 200px;  /*左外边距200px*/
    }
    img{
      
      
        width: 300px;  /*图片宽度*/
        transform: rotateX(20deg); /*绕X轴旋转，180deg可实现图片垂直翻转*/
    }
</style>

效果如下：
虽然可以明显发现图片发生了旋转，但是并不是我们想要的效果。想要的效果大致如红框区域。

设置图片在父元素内居中

最后发现是图片没有在父元素div内设置居中。由于景深加在了父元素div上，观察视角点位于div中心，所以在div内左边的图片就产生了偏移，如下图所示：

设置图片在父元素中心：

<style>
    div{
      
      
        perspective: 400px;  /*为图片父元素设置景深*/
        margin-top: 200px;   /*上外边距200px*/
        margin-left: 200px;  /*左外边距200px*/
        text-align:center; 
    }
</style>

此时效果如下：

总结

在设置图片3D旋转时，要为父元素添加perspective属性，以便看出旋转效果。旋转元素需要在父元素内居中。