CSS3实现3D转换

实现效果：
当鼠标悬停在图片上面时，图片发生翻转，文案出来，鼠标取消之后就又恢复
实现代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>3D变换</title>

    <style>

        *{

            margin:0;

            padding: 0;

        }

        body{

            background-color: #0d3462;

        }

        #piclist{

            width: 760px;

            height: 220px;

            margin:100px auto;

        }

        .picbox{

            float:left;

            width: 170px;

            height: 190px;

            margin:10px;

            position: relative;

            -webkit-transform-style: preserve-3d;

             -moz-transform-style: preserve-3d;

             -ms-transform-style: preserve-3d;

             transform-style: preserve-3d;

             transition: 1.5s;

        }

        .picbox:hover{

            transform:rotateY(180deg);

        }

        .face{

            width: 170px;

            height: 190px;

            position: absolute;

        }

        .front{

            border:2px solid #4b2518;

        }

        .back{

           -webkit-transform: rotateY(180deg);

            -ms-transform: rotateY(180deg);

            -o-transform: rotateY(180deg);

            transform: rotateY(180deg);

            /*background-color: #4b2518;*/

            border: 2px solid #fff;

        }

        .back h3{

            color: white;

            text-align: center;

        }

    </style>

</head>

<body>

    <div id="piclist">

        <div class="picbox">

            <div class="face front"><img src="data:images/1.jpg" alt=""></div>

            <div class="face back">

                <h3>浓缩咖啡</h3>

            </div>

        </div>

        <div class="picbox">

            <div class="face front"><img src="data:images/2.jpg" alt=""></div>

            <div class="face back">

                <h3>浓缩咖啡</h3>

            </div>

        </div>

        <div class="picbox">

            <div class="face front"><img src="data:images/3.jpg" alt=""></div>

            <div class="face back">

                <h3>浓缩咖啡</h3>

            </div>

        </div>

        <div class="picbox">

            <div class="face front"><img src="data:images/4.jpg" alt=""></div>

            <div class="face back">

                <h3>浓缩咖啡</h3>

            </div>

        </div>

    </div>

</body>

</html>
巴特西

CSS3实现3D转换

最新文章

热门文章
