css实现鼠标放到图片旋转效果

来源：互联网发布：黄思路韩寒知乎编辑：程序博客网时间：2024/05/18 01:10
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .flip-container {            perspective: 1000;            transform-style: preserve-3d;        }        .flip-container:hover .back {            transform: rotateY(0deg);        }        .flip-container:hover .front {            transform: rotateY(180deg);        }        .flip-container, .front, .back {            width: 320px;            height: 480px;        }        .flipper {            transition: 0.6s;            transform-style: preserve-3d;            position: relative;        }        .front, .back {            backface-visibility: hidden;            transition: 0.6s;            transform-style: preserve-3d;            position: absolute;            top: 0;            left: 0;        }        .front {            z-index: 2;            transform: rotateY(0deg);        }        .back {            transform: rotateY(-180deg);        }        .vertical.flip-container {            position: relative;        }        .vertical .back {            transform: rotateX(180deg);        }        .vertical.flip-container:hover .back {            transform: rotateX(0deg);        }        .vertical.flip-container:hover .front {            transform: rotateX(180deg);        }    </style></head><body><div class="flip-container" ontouchstart="this.classList.toggle('hover');">    <div class="flipper">        <div class="front">            <img src="img/zssh_03.png">        </div>        <div class="back">           这是背面        </div>    </div></div></body></html>
0 0