星空网 > 软件开发 > 网页设计

魔方(小玩具)

魔方(小玩具)

魔方(小玩具)

<!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='/images/loading.gif' data-original="img/2.gif"/></div>

<div><img src='/images/loading.gif' data-original="img/3.gif"/></div>

<div><img src='/images/loading.gif' data-original="img/4.gif"/></div>

<div><img src='/images/loading.gif' data-original="img/5.gif"/></div>

<div><img src='/images/loading.gif' data-original="img/6.gif"/></div>

<div><img src='/images/loading.gif' data-original="img/7.gif"/></div>

 

</div>

 

</body>

</html>

 




原标题:魔方(小玩具)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流