CSS 3D 书籍封面效果

一、效果预览

二、HTML

<div class="bookshelf" style="max-width: 900px;"><div class="book-item"><div class="book-cover"><span class="book-state">完结</span><img class="book-img" src="https://bookcover.yuewen.com/qdbimg/349573/1021708634/150.webp" /></div><div class="book-name">柯学验尸官</div><div class="book-describe">未读过</div></div><div class="book-item"><div class="book-cover"><span class="book-state book-updating">更新</span><img class="book-img" src="https://bookcover.yuewen.com/qdbimg/349573/1027339371/150.webp" /></div><div class="book-name">深空彼岸</div><div class="book-describe">0%</div></div>
</div>

三、CSS

<style>.bookshelf {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;align-items: start;justify-items: center;grid-gap: 18px 9px;margin: 18px auto;width: 100%;height: 100%;user-select: none;}.book-item {width: 99px;}.book-cover {position: relative;width: 99px;height: 132px;box-shadow: var(--el-box-shadow-light);transform: scale(.9) perspective(80px) rotateY(-8deg) translateX(-8px);transition: transform .4s ease-out;}.book-cover:hover {transform: scale(1);}.book-cover::before {box-sizing: border-box;content: "";z-index: 2;position: absolute;top: 0;left: 5px;display: inline-block;border-left: 2px solid #0005;border-radius: 2px 0 0 2px;height: 100%;}.book-cover:after {box-sizing: border-box;content: "";z-index: 0;position: absolute;top: 3%;right: -6px;display: inline-block;border: 1px solid #DEDEDE;border-radius: 9px;width: 10px;height: 93%;background-color: #ECEBEB;}.book-state {opacity: .9;z-index: 2;position: absolute;top: 5px;right: 3px;border-radius: 3px;padding: 2px 5px;color: #F4F3F3;font-size: .7em;background-color: #575959;}.book-state.book-updating {color: #FFFBED;background-color: #FF6E15;}.book-img {position: absolute;z-index: 1;border-left: 2px solid #0008;border-radius: 6px;width: 100%;height: 100%;object-fit: cover;}.book-name {opacity: .8;display: -webkit-box;margin: 9px 0 5px;width: 100%;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.book-describe {opacity: .5;font-size: .75em;}
</style>

【如果觉得本文不错 “点赞、收藏、关注”，是对作者最大的鼓励。】

CSS 3D 书籍封面效果相关推荐

jquery实现的3D缩略图悬停效果
今天我们要告诉你如何创建一些令人兴奋的3D使用CSS3和jQuery悬停效果.这一想法的灵感来自于凉爽的悬停效果,再给客户做网站的时候用的这样的效果,今天就共享出来在这个效果当中,我将使用的thum ...
[css] 用css3实现伪3D的文字效果
[css] 用css3实现伪3D的文字效果 <!DOCTYPE html> <html lang="en"><head><meta cha ...
如何用css实现左右翻页效果图,如何利用CSS3实现3D翻书效果
这篇文章主要介绍了CSS3实现3D翻书效果,基于CSS3新属性Animation及transform实现类似翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先上效果图:(样式有点丑,可以忽 ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
html5 css 3d动画效果代码,css3D+动画的例子（附完整代码）
本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...
html5实现3d翻页效果,利用css3 3d transform制作超逼真翻书效果
本教程给大家带来一个非常有创意的翻书效果,使用的是css 3D transforms属性和css transitions属性.这里将给你展示两种不同的图书设计:精装书和平装书.这两种设计只需要简单的改 ...
html元素做3d变换,CSS 3D变换
1.3D transform中有下面这三个方法: rotateX( angle ) rotateY( angle ) rotateZ( angle ) 意思是分别绕着X/Y/Z轴进行旋转. 学过一部分 ...
按钮3D分层悬停效果
按钮3D分层悬停效果纯css3实现 index.html <!DOCTYPE html> <html lang="en"><head>< ...

CSS 3D 书籍封面效果

一、效果预览

二、HTML

三、CSS

CSS 3D 书籍封面效果相关推荐

最新文章

热门文章