css3 transform属性制作完美带阴影效果的3d旋转电影海报代码

当前位置:主页 > CSS3库 > css3 transform > css3 transform属性制作完美带阴影效果的3d旋转电影海报代码
css3 transform属性制作完美带阴影效果的3d旋转电影海报代码
分享:

    插件介绍

    这是一款使用css3 transform属性制作的3d电影海报效果。这段3d旋转电影海报代码的阴影效果十分完美,当鼠标移到海报上时,海报旋转到侧面的电影介绍,效果十分震撼。

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-27
    阅读:
麦子学院

简要教程

本教程将教会大家怎么样使用css box-shadow属性制作一些非常逼真的阴影效果。

当我们在使用css3的3d变换效果(3d transform)的时候,我们会发现它们没有任何阴影效果。在现实生活中,物体有反光面和阴影,平面能够吸收光线和反射光线。所以,我们的作品也应该要做的更接近现实才行。

如果你需要在一个复杂的模型上计算反射光线,使用Photon语言也许可以实现,但是相当复杂。在这个教程中,我们将教大家一些简单的解决方案。在这个例子中,我们将制作一个3d电影海报画廊,当鼠标经过海报时,海报将旋转,包含电影信息的面将出现在正面。

更详细的教程请参看《利用CSS BOX-SHADOWS制作3D阴影效果

网友评论