使用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>
时间： 2024-11-05 00:02:34