CSS3特效之翻转

CSS3特效之翻转_第1张图片

鼠标悬停,图片翻转

CSS3特效之翻转_第2张图片


<html>
     <head>
            <meta charset="UTF-8">
            <meta name="Generator" content="EditPlus®">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
            <title>Documenttitle>
            <style>
                #container:before{
                    content:"";
                    display:table;
                }
                #container{
                    width:250px;
                    height:250px;
                    border-radius:50%;
                    background:-webkit-radial-gradient(circle,#FFFFFF,#F4F4F4,#D3D3D3);
                    margin:auto;
                    margin-top:100px;
                }
                #wrap{
                    -webkit-perspective:500px;
                    width:200px;
                    height:200px;
                    border-radius:50%;
                    background-color:#fff;
                    margin:auto;
                    margin-top:25px;
                }
                #images{
                    -webkit-transform-style:preserve-3d;
                    -webkit-transition:1.5s;
                    position:relative;
                }
                #wrap:hover #images{
                    -webkit-transform:rotateY(180deg);
                }
                #images>div{
                    position: absolute;
                    -webkit-backface-visibility:hidden;
                }
                div.back {
                    -webkit-transform:rotateY(180deg);
                    }
                img{
                    width:200px;
                    height:200px;
                    border-radius:50%;
                }
            style>
     head>
     <body>
        <div id="container">
            <div id="wrap">
                <div id="images">
                    <div class="front">
                        <img src="images/huan.jpg"/>
                    div>
                    <div class="back">
                        <img src="images/love.jpg">
                    div>
                div>
            div>
        div>
     body>
html>

你可能感兴趣的:(CSS3练习实例)