3D版本的VR产品视觉展示图文卡片

3D Card view, 文本标题呈现3D景深，飘浮在卡片前方感觉。3D图文卡片。

css, card, 3d, vr

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2994
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: linear-gradient(to right, #ffffff, #f8dce2);
    font-family: 'Varela Round', sans-serif;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.perspective {
    width: 100%;
    perspective: 1000px;
}
#top {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.card {
    width: 270px;
    height: 413px;
    margin: auto;
    box-shadow: 0 70px 63px -60px #494848;
    transform-style: preserve-3d;
    transition: transform .05s linear;
}
.card .thumb {
    background-size: cover;
    height: 100%;
    width: 100%;
    border-radius: 15px;
}
.card .thumb:after {
    background: inherit;
    content: '';
    display: block;
    position: absolute;
    left: -60px;
    top: 40px;
    width: 100%;
    height: 108%;
    z-index: -1;
    filter: blur(55px);
}
.card h2 {
    position: absolute;
    top: 0;
    left: -60px;
    font-size: 40px;
    font-weight: 100;
    transform: translateZ(80px);
}
.card span {
    position: absolute;
    bottom: 40px;
    right: -80px;
    font-size: 37px;
    font-weight: 600;
    transform: translateZ(35px);
}
.dribbble {
    position: fixed;
    top: 25px;
    right: 25px;
}
.dribbble > a {
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    color: #ec4989;
}
img {
    margin: auto;
    display: block;
    border-radius: 15px;
}

HTML

3D Card view, 文本标题呈现3D景深，飘浮在卡片前方感觉。3D图文卡片。

css, card, 3d, vr

编辑器支持Emmet

快捷键

3D Card view, 文本标题呈现3D景深，飘浮在卡片前方感觉。3D图文卡片。

css, card, 3d, vr

HTML5/WebGL VR版本的3D音序调节器

SVG 3D视觉效果的M字母创意图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：