CSS3实现翻转(Flip)效果


<html lang="en">
<head>
    <title>css3 翻转效果title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="telephone=no" name="format-detection"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
        }

        .container{-webkit-perspective:1000;transform-style:preserve-3d;}
        .container,.front,.back{width:380px;height:270px;}
        .flip{position:relative;transition:0.6s;transform-style:preserve-3d;}
        .front,.back{position:absolute;top: 0px;left: 0px;backface-visibility:hidden;}
        .front{ background-color: rgb(255,192,203);z-index:2;}
        .back{ background-color: yellow;transform:rotateY(-180deg);}
        .container:hover .flip{transform:rotateY(180deg);}


        .box{
            -webkit-perspective: 1000;
            transform-style: preserve-3d;
        }
        .t,.t1,.t2{
            width: 300px;
            height: 300px;
        }

        .t{
            position: relative;
            transition: all 0.6s;
            transform-style: preserve-3d;
        }

        .t:hover{
            transform: rotateX(180deg);
        }

        .t1,.t2{
            position: absolute;
            backface-visibility: hidden;
        }

        .t1{
            background-color: red;
            z-index: 2;
        }

        .t2{
            background-color: #0000cc;
            transform: rotateX(-180deg);
        }
    style>
head>
<body>
<div class="container">
    <div class="flip">
        <div class="front">frontdiv>
        <div class="back">enddiv>
    div>
div>

<div class="box">
    <div class="t">
        <div class="t1">t1div>
        <div class="t2">t2div>
    div>
div>



body>
html>

代码直接copy即可
第一个例子为左右3d左右翻转,第二个为3d上下翻转

你可能感兴趣的:(Html,css)