CSS实现3D书本效果代码

2023-06-08 03:06:47 149人浏览泡泡鱼

摘要

这篇文章主要介绍了CSS实现3D书本效果代码，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。话不多说，先来看一下效果图源代码如下<!DOCTYPE html&g

这篇文章主要介绍了CSS实现3D书本效果代码，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

话不多说，先来看一下效果图

CSS实现3D书本效果代码

源代码如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><style>    *{        margin: 0;        padding: 0;    }    body{        display: flex;        align-items: center;        justify-content: center;        width: 100%;        min-height: 100vh;        background: #333333;        background-size: cover;    }    .book{        width: 400px;        height: 600px;        position: relative;        background-color: #ffffff;        transfORM: rotate(-37.5deg) skewX(10deg);        box-shadow: -35px 35px 50px rgb(0,0, 0, 1);        transition: 0.5s;                cursor: pointer;    }    .book:hover{                        transform: rotate(-37.5deg) skewX(10deg) translate(20px,-20px);                box-shadow: -50px 50px 100px rgba(0,0,0,1);    }        .book::before{        content:'';        height:100%;        width:30px;        background: red;        position: absolute;        top: 0;        left: 0;        transform: skewY(-45deg) translate(-30px,-15px);         box-shadow: inset -10px 0 20px raba(0,0,0,0,2);        background: url(cofe.jpg);    }    .book::after{            content: '';            height: 30px;            width: 100%;            background: #fff;            position: absolute;            bottom: 0;            left: 0;            transform: skewX(-45deg) translate(15px,30px);            background: url(cofe.jpg);    }    .book h3{        position: absolute;        bottom: 100px;        left: 10px;        font-size: 5em;        line-height: 1em;        color: rgb(110, 21, 21);    }    .book h3 span{        background-image: url(cofe.jpg);        background-attachment: fixed;        -WEBkit-background-clip: text;        -webkit-text-fill-color: transparent;    }    .book .write i{        font-weight: 700;    }    .book .cover{        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 70%;        background-image: url(cofe.jpg);        background-size: cover;    }</style><body>    <div class="book">        <div class="cover"></div>        <h3>Book <span>javascript</span></h3>        <span class="wirte"> written by fans</span>    </div></body></html>

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS实现3D书本效果代码”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!

--结束END--

本文标题: CSS实现3D书本效果代码

本文链接: https://lsjlt.com/news/251502.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

CSS实现3D书本效果代码

这篇文章主要介绍了CSS实现3D书本效果代码，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。话不多说，先来看一下效果图源代码如下<!DOCTYPE html&g...

99+

2023-06-08
CSS3如何实现3D翻书效果

小编给大家分享一下CSS3如何实现3D翻书效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！先上效果图：（样式有点丑，可以忽略一下下，效果出来了就好，后期加到其他项目中方便更改0.0）类似...

99+

2024-04-02
怎么使用纯CSS实现书籍3D翻页效果

这篇文章主要介绍了怎么使用纯CSS实现书籍3D翻页效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。使用纯CSS实现书籍3D翻页效果，代码如下：<!doctype&nb...

99+

2023-06-08
android书架效果实现原理与代码

以前也模仿者ireader实现了书架的效果，但是那种是使用listview实现的，并不好用。绝大多数都是用gridview实现的，网上这方面资料比较少，有些开源的电子书都是重点...

99+

2022-06-06

Android
css3代码如何实现图形3d翻转效果

这篇“css3代码如何实现图形3d翻转效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“css3代码如何实现图形3d翻转效果...

99+

2023-07-04
CSS3 3d环境实现立体魔方效果代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>魔方</ti...

99+

2023-01-31

魔方效果代码
JS实现图片翻书效果示例代码

picture.html 复制代码代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...

99+

2022-11-15

JS 图片翻书
Three.js实现脸书元宇宙3D动态Logo效果

目录背景什么是元宇宙实现效果试炼一：THREE.TorusGeometry试炼二：THREE.TorusKnotGeometry试炼三：THREE.TubeGeometry试炼四：B...

99+

2024-04-02
CSS3中怎么实现文本3D效果

CSS3中怎么实现文本3D效果，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。代码如下:<!DOCTYPE ht...

99+

2024-04-02
基于Three.js实现3D玉兔效果的示例代码

目录前言技术人的快乐1、中秋与玉兔2、3D玉兔3、环境说明4、创建一个html5、定义Threejs的相关场景、相机等参数6、定义玉兔并设置大小7、最终效果前言 2022年中秋佳节即...

99+

2024-04-02
css实现“加号”效果的实例代码

这篇文章给大家分享的是有关css实现“加号”效果的实例代码的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。实现下图的加号效果：若想实现这个效果，只需一个div元素即可搞定。需要用到css的为了before和aft...

99+

2023-06-08
如何使用css实现过渡+3D效果

这篇文章主要为大家展示了“如何使用css实现过渡+3D效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用css实现过渡+3D效果”这篇文章吧。css过渡...

99+

2024-04-02
如何使用css实现3D穿梭效果

这篇文章主要介绍“如何使用css实现3D穿梭效果”，在日常操作中，相信很多人在如何使用css实现3D穿梭效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用css实现3...

99+

2024-04-02
CSS如何实现卡片3D翻转效果

这篇文章将为大家详细讲解有关CSS如何实现卡片3D翻转效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。效果：代码：html：<div class="main">...

99+

2023-06-08
css怎么实现3D图像轮转效果

这篇文章主要讲解了“css怎么实现3D图像轮转效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css怎么实现3D图像轮转效果”吧！首先看html文件，div.billboard为效果的容器...

99+

2023-07-04
纯css如何实现照片墙3D效果

小编给大家分享一下纯css如何实现照片墙3D效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！准备材料：准备材料就是没什么材料，自己麻溜赶快的去：百度找几张美女的照片来测试即可。html代码：<!DOCTYPE&nb...

99+

2023-06-08
CSS代码怎么实现书签

今天小编给大家分享一下CSS代码怎么实现书签的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。书签实现这种效果的原理就是讲三角形...

99+

2023-07-04
CSS绘制奇幻效果：实现3D旋转立方体效果

在Web开发中，我们常常需要使用CSS来实现各种奇幻的效果，而其中一个很受欢迎的效果就是3D旋转立方体效果。通过CSS的3D转换属性，我们可以很轻松地实现这一效果。下面，我将为大家详细介绍如何使用CSS来实现一个3D旋转立方体，并提供具体的...

99+

2023-10-21

CSS 绘制 D旋转立方体效果
怎么利用CSS实现书签效果

小编给大家分享一下怎么利用CSS实现书签效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！实现的效果图如下：示例代码如下：<!DOCTYPE html><html> ...

99+

2023-06-08
CSS代码怎么实现loading动画效果

本篇内容介绍了“CSS代码怎么实现loading动画效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果：代码使用了CSS的keyfram...

99+

2023-07-04