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>
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 */
- pointer-events: none;
元素永远不会成为鼠标事件的target,不设置此属性就会导致在.card-back上点击事件穿透到.card-front上