3D酷炫翻牌效果

CSS3 3D翻转效果

最新推荐文章于 2023-09-07 11:05:22 发布

weixin_34096182

最新推荐文章于 2023-09-07 11:05:22 发布

阅读量107

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanglitao/p/5685485.html

使用CSS3实现酷炫的3D翻转效果，上代码：

<!doctype html>
<html>
    <head>
        <!--声明当前页面编码集(中文编码<gbk,gb2312>,国际编码<utf-8>)-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="keywords" content="关键词,关键词">
        <meta name="description" content="">
        <title> html </title>
        <style type="text/css">
            *{padding:0px;margin:0px;}
            #box{width:970px;margin:50px auto;}
            /*container start*/
            .container{float:left;width:300px;height:400px;margin:10px 0 0 10px;/*设置3d环境*/transform-style:preserve-3d;perspective:500px;}
            .container .font{z-index:1;position:absolute;transition:all 1s linear;}

            .container:hover .back{z-index:2;}

            .container .back{transform: rotateY(180deg);position:absolute;left:0;top:0;padding:20px;width:260px;height:360px;z-index:0;transition:all 1s linear;background:linear-gradient(#9C3535,#333379);box-shadow: 5px 5px 4em #523E3E inset;color:#e5e5e5;font-size:16px;font-family:"楷体";}
            
            .container .item{transition:all 1s linear;}

            .container:hover .item{transform: rotateY(180deg);transition:all 1s linear;}
            /*container end*/
        </style>
    </head>
<body>
    <div id="box">
        <!--container start-->
        <div class="container">
            <div class="item">
                <div class="font">
                    <img src="image/1.jpg" width="300" height="400"/>
                </div>
                <div class="back">
                    亲爱滴同学们，我爱你们
                </div>
            </div>
        </div>
        <!--container end-->
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/wanglitao/p/5685485.html