css3正反面内容翻转切换

元素翻转之后,看到背面的内容。css3效果代码如下

    
    <html>
        <head>
            <meta charset="utf-8" />
            <style>
                *{margin:0;padding:0;}
                .element{position:relative;color:#fff;text-align:center;line-height:120px;transform-style:preserve-3d;transition:1s;}
                .element,.front,.back{width:90px;height:120px;backface-visibility:hidden;}
                .front,.back{position:absolute;left:0;top:0;}
                .front{background:#f00;}
                .back{background:#0f0;transform:rotateY(180deg);}
                .element:hover{transform:rotateY(180deg);}
            style>
        head>
        <body>
            <div class="element">
                <div class="front">前面div>
                <div class="back">背面div>
            div>
        body>
    html>

你可能感兴趣的:(html/css)