纯CSS3实现3D旋转书本效果
} 2. 添加封面接着我们给前后以及左侧面元素添加背景图(可以使用一张图,然后从不同的位置截取),给其他3个面添加背景颜色,并给“底”面添加阴影效果:
CSS Code复制内容到剪贴板
.front { transform: translateZ(9.1px); background: url("//wow.techbrood.com/uploads/160301/mysql.png") top rightright; background-size: auto 100%; } .back { transform: rotateY(180deg) translateZ(9.1px); background: url("//wow.techbrood.com/uploads/160301/mysql.png") top left; background-size: auto 100%; } .top { transform: rotateX(90deg) rotateZ(90deg) translateZ(98.8px) translateY(-89.7px); background: #fafafa; width: 18.2px; height: 197.6px; } .bottombottom { transform: rotateX(-90deg) rotateZ(90deg) translateZ(161.2px) translateY(-89.7px); background: #ccc; width: 18.2px; height: 197.6px; -webkit-filter: drop-shadow(0 0 26px rgba(0, 0, 0, 0.75)); } .left { transform: rotateY(-90deg) translateZ(9.1px); background: url("//wow.techbrood.com/uploads/160301/mysql.png") top center; background-size: auto 100%; width: 18.2px; } .rightright { transform: rotateY(90deg) translateZ(188.5px); background: #ddd; background-size: auto 100%; width: 18.2px; } 这样我们就实现了一个逼真的3D书本视觉模型。3. 添加旋转动画 这个比较简单,使用rotateY方法就可以。
CSS Code复制内容到剪贴板
@-webkit-keyframes rotate { 0% { transform: rotateY(0) translateX(-18.2px); } 100% { transform: rotateY(360deg) translateX(-18.2px); } } 最终的效果图如下: 关于CSS3实现3D旋转书本 的全部内容小编就给大家介绍这么多,希望对大家有所帮助! (编辑:西双版纳站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |