前言

游龙当归海，海不迎我自来也！落叶当归根，根不迎我三仙人！云鹤当归天，天不迎我妙木仙！猛虎当归山，山不迎我大豪杰！

效果展示

GIF 2021-9-12 23-05-38.gif

实现思路

首先《亲热天堂》在平铺时需要呈现出立体感，我们可以使用伪类元素来构成书籍的上侧边和右侧边，通过transform:skew() 属性我们可以定义一个倾斜转换的元素，同时我们给父元素加上内外阴影效果，使其看起来更加饱满，当然为了3D效果的更好呈现，设置视距以及为子元素保留3D位置也是必不可少的。最后当鼠标浮动在元素上时，使得扉页的亲热天堂图片进行Y轴的旋转，从而达到翻页的效果~~

代码如下

HTML

//HTML
<body>
    <div class="content">
        <div class="imgBox">
            <img src="./images/亲热天堂.jpg" style="height:400px;width:300px" />
        </div>
        <div class="details">
            <h2>You Have Only One Life</h2>
            <br />
            <p>
                There are moments in life when you miss someone so much that you
                just want to pick them from your dreams and hug them for real!
                Dream what you want to dream;go where you want to go;be what you
                want to be,because you have only one life and one chance to do
                all the things you want to do.
            </p>
        </div>
    </div>
</body>

CSS

//CSS
@import url('https://fonts.font.im/css?family=Quicksand');

* {
    margin: 0;
    padding: 0;
}

body {
    background: #FF8000;
    overflow: hidden;
    font-family: 'Quicksand', sans-serif;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) perspective(2000px);
    height: 400px;
    width: 300px;
    background-color: #fff;
    transform-style: preserve-3d;
    box-shadow: inset 300px 0 50px rgba(0, 0, 0, 0.5), 0 20px 100px rgba(0, 0, 0, 0.5);
}

.content:hover {
    transform: translate(-50%, -50%) perspective(2000px) rotate(-10deg);
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5), 0 10px 100px rgba(0, 0, 0, 0.5);
}

.content::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #DBA901;
    /* transform-origin可以改变被转换元素的位置，但必须与 transform 属性一同使用 */
    /* 这里元素被2D倾斜转换了，但是是以元素中心点转换，所以倾斜后左侧会突出一块，所以需要定义下以什么位置进行转换 */
    transform-origin: bottom;
    /* skew()属性的坐标轴是垂直方向是X轴，水平方向才是Y轴，具体效果只需要记住设置了哪个轴那么那个轴的长度就会被拉伸，X轴逆时针旋转，Y轴顺时针旋转 */
    transform: skewX(-45deg);
}

.content::after {
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    width: 5px;
    height: 100%;
    background: #FFBF00;
    transform-origin: left;
    transform: skewY(-45deg);
}

.imgBox {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: left;
    transition: 1s cubic-bezier(.15, 1.7, .84, .58);
}

.content:hover .imgBox {
    transform: rotateY(-135deg);
}

.details {
    position: absolute;
    top: 0;
    left: 0;
    /* z-index必须在定位元素（position:relative/absolute/fixed/sticky）上才有效 */
    z-index: -1;
    padding: 20px;
    box-sizing: border-box;
    user-select: none;
}

注意点总结： 1. transform-origin 属性可以改变被转换元素的基点位置，默认以元素自己中心点变形，但是必须与 transform 属性一同使用。 2. transform: skew() 属性的坐标轴与数学坐标轴不同，垂直方向是X轴，水平方向才是Y轴，具体效果只需记住设置了哪个轴那么那个轴的长度就会被拉伸，X轴方向是逆时针旋转，Y轴方向是顺时针旋转。 3. z-index 属性指定一个元素的堆叠顺序，但是必须在定位元素 （position:relative/absolute/fixed/sticky） ——即 非static 的定位属性上才有效。同时还需要注意如果父元素 positon：relative ，或者当前设置了z-index属性的元素为浮动元素都会导致 z-index 失效~

用CSS实现《亲热天堂》——致敬自来也老师

前言

效果展示

实现思路

代码如下

HTML

CSS