效果展示

页面结构

从上面的效果展示来看，页面主要成员是一张卡片，并且卡片上有三个小矩形，而小矩形上会展示对应的内容。

当鼠标悬停在卡片上时，卡片会随着鼠标的移动而改变视角。

CSS3 知识点

• transform-style 属性的 preserve-3d 值运用
• transform 属性的 translateZ 值运用
• VanillaTilt.js 与 translateZ 的 3D 视角运用

实现页面整体布局

<div class="container"><div class="box"><div class="elements bg"></div><div class="elements img_box"><img src="./images/user-2.png" /></div><div class="elements name"><h2>Someone Famous</h2></div><div class="elements content"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quismagni porro et unde eos consectetur esse cum voluptatibus dolor.Voluptatem eligendi, veniam molestias incidunt quod corporis providentmagnam iure.</p></div><div class="card"></div></div>
</div>

实现卡片的基础样式

.box {position: relative;border-radius: 20px;transform-style: preserve-3d;
}.box .card {position: relative;background: rgba(255, 255, 255, 0.1);width: 300px;min-height: 400px;backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.5);border-top: 1px solid rgba(255, 255, 255, 0.75);border-left: 1px solid rgba(255, 255, 255, 0.75);border-radius: 20px;box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);transform-style: preserve-3d;
}

编写三个小矩形的基础样式

.elements {position: absolute;top: 50px;left: -30px;width: 100px;height: 100px;background: rgba(255, 255, 255, 0.1);transform: translateZ(80px);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.5);border-top: 1px solid rgba(255, 255, 255, 0.75);border-left: 1px solid rgba(255, 255, 255, 0.75);border-radius: 10px;box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);
}

编写装饰类小矩形的样式及鼠标悬停样式

.elements.bg::before {content: "";display: block;position: absolute;inset: 0;background: url(./images/left_quote.png) no-repeat center;background-size: 90%;opacity: 0;transition: 0.5s;
}.box:hover .elements.bg::before {opacity: 1;
}

编写用户头像小矩形框样式及鼠标悬停样式

.elements.img_box {top: 0;left: initial;right: 60px;width: 120px;height: 120px;padding: 10px;transform: translateZ(120px);
}.elements.img_box img {position: absolute;width: calc(100% - 20px);border-radius: 8px;border: 1px solid rgba(255, 255, 255, 0.5);border-top: 1px solid rgba(255, 255, 255, 0.75);border-left: 1px solid rgba(255, 255, 255, 0.75);box-shadow: 0 25px 45px rgba(0, 0, 0, 0.05);opacity: 0;transition: 0.5s;
}.box:hover .elements.img_box img {opacity: 1;
}

编写用户姓名的样式和鼠标悬停样式

.elements.name {top: 235px;left: initial;right: 0;width: 100%;height: 10px;padding: 10px;text-align: center;transform: translateZ(180px);background: transparent;backdrop-filter: blur(0px);border: none;box-shadow: none;color: #644651;transition: 0.5s;opacity: 0;transition-delay: 0.25s;
}.box:hover .elements.name {opacity: 1;top: 145px;
}

编写用户信息卡片和鼠标悬停样式

.elements.content {top: initial;left: initial;bottom: 0;right: -20px;width: 85%;min-height: 200px;padding: 10px;transform: translateZ(180px);text-align: center;display: flex;justify-content: center;align-items: center;
}.elements.content p {position: relative;color: #fff;font-size: 0.85em;opacity: 0;transition: 0.5s;transition-delay: 0.5s;color: #644651;
}.box:hover .elements.content p {opacity: 1;
}

完整代码下载

完整代码下载