.outer{
transform-style: preserve-3d;
width: 300px;
height: 300px;
position: absolute;
left: 600px;
top: 300px;
transform: rotateX(45deg) rotateY(45deg) ;
transition: all 20s;
}
.outer1{
position: absolute;
left: 25%;
top: 25%;
}
.outer1>.item{
width: 150px;
height: 150px;
opacity: 0.6;
position: absolute;
box-shadow: 0 0 30px lightyellow;
}
.outer2>.item-big{
width: 300px;
height: 300px;
position: absolute;
opacity: 0.6;
box-shadow: 0 0 60px lightyellow;
background-size: 300px 300px;
}
.item1{
background: red;
transform: translateZ(75px);
}
.item2{
background: deeppink;
transform: translateZ(-75px);
}
.item3{
background: deepskyblue;
transform: rotateX(90deg) translateZ(75px);
}
.item4{
background: blue;
transform: rotateX(90deg) translateZ(-75px);
}
.item5{
background: orange;
transform: rotateY(90deg) translateZ(75px);
}
.item6{
background: green;
transform: rotateY(90deg) translateZ(-75px);
}
.item7{
background: url("../resource/img/timg.jpeg");
transform: translateZ(150px);
}
.item8{
background: url("../resource/img/timg.jpeg");
transform: translateZ(-150px);
}
.item9{
background: url("../resource/img/timg.jpeg");
transform: rotateX(90deg) translateZ(150px);
}
.item10{
background: url("../resource/img/timg.jpeg");
transform: rotateX(90deg) translateZ(-150px);
}
.item11{
background: url("../resource/img/timg.jpeg");
transform: rotateY(90deg) translateZ(150px);
}
.item12{
transform: rotateY(90deg) translateZ(-150px);
background: url("../resource/img/timg.jpeg");
}
.outer:hover {
transform: rotateX(1440deg) rotateY(1440deg) ;
}
.outer2:hover>.item7{
transform: translateZ(300px);
}
.outer2:hover>.item8{
transform: translateZ(-300px);
}
.outer2:hover>.item9{
transform: rotateX(90deg) translateZ(300px);
}
.outer2:hover>.item10{
transform: rotateX(90deg) translateZ(-300px);
}
.outer2:hover>.item11{
transform: rotateY(90deg) translateZ(300px);
}
.outer2:hover>.item12{
transform: rotateY(90deg) translateZ(-300px);
}
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
