vue卡片鼠标悬浮翻转效果组件_vue好看的悬浮卡片

1. 组件代码

<template>
    <div class="container">
        <div class="card">
            <div class="card-main-style card-front"></div>
            <div class="card-main-style card-back"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: ''
}
</script>

<style lang="stylus" scoped>
.container
    position relative
    z-index 0
    width 291px
    height 290px
    margin-right 12px
    margin-bottom 12px
    &:hover
        .card
            transform rotateY(180deg)
.card
    width 300px
    height 300px
    position relative
    z-index 500
    transition transform .5s
    transform-style preserve-3d
    /* 兼容浏览器 */
    -webkit-transform-style preserve-3d /* Safari 和 Chrome */
    -moz-transform-style preserve-3d /* Firefox */
    -ms-transform-style preserve-3d /* IE9 */
    -o-transform-style preserve-3d /* Opera */
.card-main-style
    width 100%
    height 100%
    text-align left
    position absolute
.card-front
    z-index 1000
    pointer-events none
    padding 40px 28px 0
    box-sizing border-box
    border-radius 5px
    box-shadow 1px 2px 16px 0px rgba(0, 0, 0, 0.04)
    background-color #fff
.card-back
    z-index 2000
    padding 40px 30px 0
    backface-visibility hidden
    transform rotateY(180deg)
    border-radius 5px
    background-color #4865ff
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

2. 重点代码说明

• .card外面包一层.container原因
  .card外又包一层.container的原因： 若没有.container，则在悬浮card的时候，.card只会随着鼠标的停止而停止，做不到全面翻转，所以加了一层.container

• transform-style: preserve-3d; 3d双面效果

/* 兼容浏览器 */
-webkit-transform-style preserve-3d /* Safari 和 Chrome */
-moz-transform-style preserve-3d /* Firefox */
-ms-transform-style preserve-3d /* IE9 */
-o-transform-style preserve-3d /* Opera */
1
2
3
4
5

• pointer-events: none;
  元素永远不会成为鼠标事件的target，不设置此属性就会导致在.card-back上点击事件穿透到.card-front上