你的位置:首页 > 网页设计

[网页设计]魔方(小玩具)


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

*{

padding: 0;

margin: 0;

}

height: 100%;

}

body{

position: relative;

perspective: 1000px;

}

 

 

.wrap{

width: 240px;

height: 240px;

/*border: 1px solid red;*/

position: absolute;

top: 50%;

left: 50%;

margin-left: -120px;

margin-top: -120px;

transform-style: preserve-3d;

transform: rotateX(45deg) rotateY(45deg);

transition: all 100s linear;

 

 

 

 

}

.wrap:hover{

transform: rotateX(10000deg) rotateY(10000deg);

}

.wrap div{

width: 240px;

height: 240px;

position: absolute;

top: 0;

left: 0;

 

 

 

 

}

img{

width: 100%;

height: 100%;

border-radius: 40px;

opacity: 0.8;

}

 

.wrap div:nth-child(1){

transform: rotateY(90deg) translateZ(120px);

 

}

.wrap div:nth-child(2){

transform: rotateY(0deg) translateZ(120px);

 

}

.wrap div:nth-child(3){

transform: rotateY(0deg) translateZ(-120px);

 

}

.wrap div:nth-child(4){

transform: rotateY(90deg) translateZ(-120px);

 

}

.wrap div:nth-child(5){

transform: rotateX(90deg) translateZ(120px);

 

}

.wrap div:nth-child(6){

transform: rotateX(90deg) translateZ(-120px);

 

}

</style>

</head>

<body>

<div >

<div><img src="img/2.gif"/></div>

<div><img src="img/3.gif"/></div>

<div><img src="img/4.gif"/></div>

<div><img src="img/5.gif"/></div>

<div><img src="img/6.gif"/></div>

<div><img src="img/7.gif"/></div>

 

</div>

 

</body>

</html>