鼠标悬停div翻转效果，记录自己制作时踩得一些坑及解决方案

来源：互联网发布：网络大电影制作成本编辑：程序博客网时间：2024/05/16 18:49

先上图，分别为鼠标悬停前后（翻转效果表现不出来）

 .project-right-top-create-class{            color: #56abe4;            text-align: center;            padding: 0px;            .project-right-top-create-class-context{              height: 170px;              padding: 20px;              -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;              .project-right-top-create-class-icon{                display:block;                height:100px;                width:100px;                background:url("/assent/img/icon-create-class.png") center no-repeat;                background-size:100px 100px;              }            }          }          .project-right-top-create-class:hover{            .project-right-top-create-class-context{              transform: rotateY(180deg);              background-color: #56abe4;              color: #ffffff;              .project-right-top-create-class-icon{                display:block;                height:100px;                width:100px;                background:url("/assent/img/icon-create-class-on.png") center no-repeat;                background-size:100px 100px;              }              .project-right-top-create-class-note{                transform: rotateY(180deg);              }            }          }

 <div class="col-sm-3 border-define-right project-right-top-create-class">                <div class="project-right-top-create-class-context">                    <span class="project-right-top-create-class-icon center-block">                    </span>                    <!--<img src="/assent/img/icon-create-class.png" class="center-block" width="100" height="100">-->                    <h4 class="project-right-top-create-class-note">Create  Class</h4>                </div>            </div>

注意点：

1. css我是用的是less

2. 给外层的div添加hover，但是一定不要直接旋转外层div，而是旋转外层的子div，因为如果直接旋转外层div，会导致外层div的宽高发生变化，此时鼠标可能就不再div上面了，也就是不合符hover事件，从而导致bug.

3. div旋转180度，对称的图片不会受到影响，但文字就不能正常识别了，此时的做法就是让文字再次旋转180度。

0 0