css 水平旋转

来源：互联网发布：js涂膜防水施工工艺编辑：程序博客网时间：2024/06/05 20:20

.flip-container {    margin: 30px;    display: inline-block;    border: 1px solid #aaa;    -webkit-perspective: 500;    -moz-perspective: 500;    -ms-perspective: 500;    perspective: 500;    -ms-transform: perspective(500px);    -moz-transform: perspective(500px); /*重要*/    transform-style: preserve-3d; /*重要*/}.flipper {    position: relative;    width: 200px;    height: 200px;    transition: 0.6s;    transform-style: preserve-3d; /*重要*/}/* 触发翻转 */.flip-container:hover .flipper{    transform: rotateY(180deg);}.front ,.back{    position: absolute;    left: 0;    top: 0;    backface-visibility: hidden;  /*重要*/    width: 100%;    height: 100%;}.front {    transform: rotateY(0deg);    z-index: 2;    background: red;}.back {    transform: rotateY(-180deg);    background: green;}
<div class="flip-container">    <div class="flipper">        <div class="front">here is content : AA</div>        <div class="back">here is content : BB</div>    </div></div>

阅读全文

0 0