可以选择的盒子

最新推荐文章于 2025-09-07 12:15:11 发布

weixin_34240657

最新推荐文章于 2025-09-07 12:15:11 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml python

原文链接：https://my.oschina.net/codegong/blog/265602

2019独角兽企业重金招聘Python工程师标准>>>

效果如上图所示代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>3d 旋转盒子制作</title>
<style>
.out{width:800px;height:350px;margin:100px auto;border:1px red solid;-webkit-perspective:1100px;}
ul,li{padding:0;margin:0;list-style:none;}
.box{width:100%;height:100%;position:relative;-webkit-transform-style:preserve-3d;-webkit-transition:all 3s ease;-webkit-transform:translateZ(-50px);}
.box:hover{-webkit-transform:rotate3d(0,1,0,180deg);}
.box li{position:absolute;width:100%;height:100%;opacity:.8;filter:alpha(opacity=80);}
.box li img{width:100%;height:100%;}
.box li:nth-of-type(1){
 height:50px;background:#333;top:-50px;left:0;
 -webkit-transform-origin:bottom;
 -webkit-transform:rotateX(-90deg);
}
.box li:nth-of-type(2){
width:50px;background:#333;top:0;left:-50px;
 -webkit-transform-origin:right;
 -webkit-transform:rotateY(90deg);
}
.box li:nth-of-type(3){
background:green;top:0;left:0px;
text-align:center;
line-height:350px;
font-size:24px;
font-family:"微软雅黑";
color:blue;
text-shadow: 2px 2px 3px #333; 
}
.box li:nth-of-type(4){
width:50px;background:#333;top:0;left:800px;
 -webkit-transform-origin:left;
 -webkit-transform:rotateY(-90deg);
}
.box li:nth-of-type(5){
height:50px;background:#333;top:350px;left:0px;
 -webkit-transform-origin:top;
 -webkit-transform:rotateX(90deg);
}
.box li:nth-of-type(6){
background:pink;top:0px;left:0px;
-webkit-transform:translateZ(50px);
text-align:center;
line-height:350px;
font-size:24px;
font-family:"微软雅黑";
color:white;
text-shadow: 2px 2px 3px #333; 
}
</style>
</head>
<body>
<div class="out">
 <ul class="box">
   <li>1</li>
   <li>2</li>
   <li><img src="1.jpg"></li>
   <li>4</li>
   <li>5</li>
   <li><img src="2.jpg"></li>
 </ul>
</div>
</body>
</html>

转载于:https://my.oschina.net/codegong/blog/265602