css实现3D卡片效果

前端 css技巧前端

发布时间 : 2023-05-05 13:52

字数:471 阅读 :

css实现小卡片的3D效果
效果:

css实现小卡片的3D效果

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}

.card {
    width: 200px;
    height: 300px;
    transform: translateY(-50%);
    position: relative;
}

.card img {
    position: absolute;
    width: 100%;
    left: 0;
    transition: 0.5s;
    /* 过度效果 */
}

.cover {
    height: 100%;
    z-index: 1;
}

.people {
    height: 100%;
    z-index: 2;
    opacity: 0;
    /*是否可见 */
}

.title {
    z-index: 3;
    bottom: 0;
}

.card:hover .cover {
    transform: perspective(500px) rotateX(25deg);
    box-shadow: 0 35px -8xp rgba(0, 0, 0, 0.75);
}

.card:hover .people {
    opacity: 1;
    transform: perspective(500px) translate3d(0, -75px, 50px);
    box-shadow: 0 35px -8xp rgba(0, 0, 0, 0.75);
}

.card:hover .title {
    transform: perspective(500px) translate3d(0, -25px, 50px)
}

box-sizing:border-box; 这个属性能够使你设置的内外边距,边框的值包含在宽,高内.如果你设置宽为100px那么他会自动的计算宽=原宽-(边框+内边距)可以更容易的去设定一个元素的宽高.

justify-content: center;这个属性能够让每个弹性盒居中排列,在flex-grow属性不等于0时不会生效.

transform: translateY(-50%);transform属性能够使元素旋转,缩放,倾斜,平移,与top不同transfor是对元素进行变形所以依然占据着原始位置,文中使元素向y轴向上平移自身高度的一半距离

transition: 0.5s;这个是一个动画过渡属性,可以在元素发生变化是创建动画效果,如颜色,位置,大小发生变化时,过渡属性将会填充动画效果,并按照指定的时间间隔使变化变的平滑

transform: perspective(500px) rotateX(25deg);这里的perspective函数能够创建一个三维透视效果,使元素在旋转时具有更真实的立体感.函数的参数表示透视的距离,rotateX表示在x轴方向上旋转25度产生立体感和深度感.

效果:

欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1701220998@qq.com