鼠标悬停在外面那张图片上时，会放大，你可以放入你喜欢的图片!
效果图：
运用图片：111.jpg，222.jpg
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3Dbox</title>
<link rel="stylesheet" type="text/css"
href="./css/index.css"/>
</head>
<body>
<!-- div.box按下tab -->
<div class="box">
<!-- ul.minbox>li*6 按下tab -->
<ul class="minbox">
<li></li>
<li></li>
<li></li>
<li><li>
<li></li>
</ul>
<ul class="maxbox">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
CSS代码
*{
margin: 0; /*去掉外边距*/
padding: 0; /*去掉内边距*/
}
.box{
width: 200px; /*宽度*/
height: 200px; /*高度*/
position: absolute;/*绝对定位*/
top: 30%; /*与顶部的距离*/
left: 40%;/*与左侧的距离*/
transform-style: preserve-3d; /*^_^只有设置了此属性才有z轴*/
transform: rotateX(-90deg);/*绕x轴旋转*/
/*使用动画*/
animation: move 10s 100 linear;
/*动画名称 动画执行的时间 次数 匀速*/
}
ul{
list-style: none; /*去掉点*/
}
/*定义动画*/
@keyframes move{
from{ transform: rotateX(-30deg) rotateY(0deg); }
to{transform: rotateX(-30deg) rotateY(360deg);}
}
/*小盒子*/
.minbox{
width: 100px; /*宽度*/
height: 100px;/*高度*/
position: absolute; /*绝对定位*/
left: 50px;
top: 50px;
transform-style: preserve-3d;/*设置为3d图形*/
}
.minbox > li{
width: 100px;
height: 100px;
border: 1px solid black;/*边框宽度 样式 颜色*/
font-size: 50px;/*设置字体大小*/
text-align: center;/*文本水平居中*/
line-height: 100px;/*让行高等于高度,达到垂直居中的效果*/
position: absolute;
left: 0;
top: 0;
background-image: url(../img/111.jpg);//可以换成你喜欢的照片
background-size: 100px 100px;
}
.minbox > li:nth-child(1){
transform: translateZ(50px);
}
.minbox > li:nth-child(2){
transform: translateZ(-50px);
}
.minbox > li:nth-child(3){
transform: rotateY(90deg) translateZ(50px);
}
.minbox > li:nth-child(4){
transform: rotateY(90deg) translateZ(-50px);
}
.minbox > li:nth-child(5){
transform: rotateX(90deg) translateZ(50px);
}
.minbox > li:nth-child(6){
transform: rotateX(90deg) translateZ(-50px);
}
/*大盒子*/
.maxbox{
width: 200px; /*宽度*/
height: 200px;/*高度*/
position: absolute; /*绝对定位*/
left: ;
top: 0;
transform-style: preserve-3d;/*设置为3d图形*/
}
.maxbox > li{
width: 200px;
height: 200px;
border: 1px solid black;/*边框宽度 样式 颜色*/
font-size: 50px;/*设置字体大小*/
text-align: center;/*文本水平居中*/
line-height: 200px;/*让行高等于高度,达到垂直居中的效果*/
position: absolute;
left: 0;
top: 0;
background-image: url(../img/222.jpg);//可以换成你喜欢的照片
background-size: 200px 200px;
opacity: 0.8;
}
.maxbox > li:nth-child(1){
transform: translateZ(100px);
}
.maxbox > li:nth-child(2){
transform: translateZ(-100px);
}
.maxbox > li:nth-child(3){
transform: rotateY(90deg) translateZ(100px);
}
.maxbox > li:nth-child(4){
transform: rotateY(90deg) translateZ(-100px);
}
.maxbox > li:nth-child(5){
transform: rotateX(90deg) translateZ(100px);
}
.maxbox > li:nth-child(6){
transform: rotateX(90deg) translateZ(-100px);
}
.box:hover ul.maxbox > li{
width: 400px;
height: 400px;
background-size: 400px 400px ;
top: -100px;
left: -100px;
}
.box:hover ul.maxbox > li:nth-child(1){
transform: translateZ(300px);
}
.box:hover ul.maxbox > li:nth-child(2){
transform: translateZ(-300px);
}
.box:hover ul.maxbox > li:nth-child(3){
transform: rotateY(90deg) translateZ(300px);
}
.box:hover ul.maxbox > li:nth-child(4){
transform: rotateY(90deg) translateZ(-300px);
}
.box:hover ul.maxbox > li:nth-child(5){
transform: rotateX(90deg) translateZ(300px);
}
.box:hover ul.maxbox > li:nth-child(6){
transform: rotateX(90deg) translateZ(-300px);
}
