CSS3翻转效果

来源：互联网发布：mysql 建库语句 utf8 编辑：程序博客网时间：2024/06/06 00:56

<!DOCTYPE html><html>

<head>    <title>翻转效果</title>    <style type=text/css>        .container{            width: 500px;            height: 500px;            border: 1px solid #3c3c3c;            position: relative;            text-align: center;            font-size: 100px;            animation: rot 5s infinite;            -webkit-transform-style:preserve-3d;        }        @keyframes rot{            0% {transform: rotateY(0deg);}            30% {transform: rotateY(180deg);}            50% {transform: rotateY(180deg);}            70% {transform: rotateY(360deg);}            100% {transform: rotateY(360deg);}        }        .before{            width: 500px;            height: 500px;            background: #f0f;            position: absolute;            top: 0;            left: 0;            z-index: 3;        }        .after{            width: 500px;            height: 500px;            background: #0ff;            position: absolute;            top: 0;            left: 0;            transform: rotateY(180deg);        }    </style></head>

<body>    <div class="container">        <div class="before">前面</div>        <div class="after">后面</div>    </div></body>

</html>

阅读全文

0 0