css3元素周期表

来源：互联网发布：centos 防止暴力破解编辑：程序博客网时间：2024/04/27 22:44

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素周期表滚筒</title>
<style>
body{
perspective: 1000px;
background-color: #ddd;
}
.warp{
width: 500px;
/*border: 2px solid #000;*/
margin-left: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

-webkit-transition: all 30s ;
-o-transition: all 30s ;
transition: all 30s ;
}
.warp:hover{
-webkit-transform: rotateY(3000deg);
-ms-transform: rotateY(3000deg);
-o-transform: rotateY(3000deg);
transform: rotateY(3000deg);
}
.all{
width: 100px;
height: 150px;
position: relative;
/*border: 1px solid red;*/
margin:100px auto;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

-webkit-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);
}
.all div{
width: 100px;
height: 150px;
position: absolute;
left: 0;
top: 0;
font-size: 80px;
text-align: center;
line-height: 150px;
border:1px solid black;
background-color: blue;
opacity: 0.6;
box-shadow: 0 0 5px 10px purple;
}
.all div:nth-child(1){
-webkit-transform: rotateY(0deg) translateZ(250px) translateY(0px);
-ms-transform: rotateY(0deg) translateZ(250px) translateY(0px);
-o-transform: rotateY(0deg) translateZ(250px) translateY(0px);
transform: rotateY(0deg) translateZ(250px) translateY(0px);
}
.all div:nth-child(2){
-webkit-transform: rotateY(30deg) translateZ(250px) translateY(15px);
-ms-transform: rotateY(30deg) translateZ(250px) translateY(15px);
-o-transform: rotateY(30deg) translateZ(250px) translateY(15px);
transform: rotateY(30deg) translateZ(250px) translateY(15px);
}
.all div:nth-child(3){
-webkit-transform: rotateY(60deg) translateZ(250px) translateY(30px);
-ms-transform: rotateY(60deg) translateZ(250px) translateY(30px);
-o-transform: rotateY(60deg) translateZ(250px) translateY(30px);
transform: rotateY(60deg) translateZ(250px) translateY(30px);
}
.all div:nth-child(4){
-webkit-transform: rotateY(90deg) translateZ(250px) translateY(45px);
-ms-transform: rotateY(90deg) translateZ(250px) translateY(45px);
-o-transform: rotateY(90deg) translateZ(250px) translateY(45px);
transform: rotateY(90deg) translateZ(250px) translateY(45px);
}
.all div:nth-child(5){
-webkit-transform: rotateY(120deg) translateZ(250px) translateY(60px);
-ms-transform: rotateY(120deg) translateZ(250px) translateY(60px);
-o-transform: rotateY(120deg) translateZ(250px) translateY(60px);
transform: rotateY(120deg) translateZ(250px) translateY(60px);
}

.all div:nth-child(6){
-webkit-transform: rotateY(150deg) translateZ(250px) translateY(75px);
-ms-transform: rotateY(150deg) translateZ(250px) translateY(75px);
-o-transform: rotateY(150deg) translateZ(250px) translateY(75px);
transform: rotateY(150deg) translateZ(250px) translateY(75px);
}
.all div:nth-child(7){
-webkit-transform: rotateY(180deg) translateZ(250px) translateY(90px);
-ms-transform: rotateY(180deg) translateZ(250px) translateY(90px);
-o-transform: rotateY(180deg) translateZ(250px) translateY(90px);
transform: rotateY(180deg) translateZ(250px) translateY(90px);
}
.all div:nth-child(8){
-webkit-transform: rotateY(210deg) translateZ(250px) translateY(105px);
-ms-transform: rotateY(210deg) translateZ(250px) translateY(105px);
-o-transform: rotateY(210deg) translateZ(250px) translateY(105px);
transform: rotateY(210deg) translateZ(250px) translateY(105px);
}
.all div:nth-child(9){
-webkit-transform: rotateY(240deg) translateZ(250px) translateY(120px);
-ms-transform: rotateY(240deg) translateZ(250px) translateY(120px);
-o-transform: rotateY(240deg) translateZ(250px) translateY(120px);
transform: rotateY(240deg) translateZ(250px) translateY(120px);
}
.all div:nth-child(10){
-webkit-transform: rotateY(270deg) translateZ(250px) translateY(135px);
-ms-transform: rotateY(270deg) translateZ(250px) translateY(135px);
-o-transform: rotateY(270deg) translateZ(250px) translateY(135px);
transform: rotateY(270deg) translateZ(250px) translateY(135px);
}
.all div:nth-child(11){
-webkit-transform: rotateY(300deg) translateZ(250px) translateY(150px);
-ms-transform: rotateY(300deg) translateZ(250px) translateY(150px);
-o-transform: rotateY(300deg) translateZ(250px) translateY(150px);
transform: rotateY(300deg) translateZ(250px) translateY(150px);
}
.all div:nth-child(12){
-webkit-transform: rotateY(330deg) translateZ(250px) translateY(165px);
-ms-transform: rotateY(330deg) translateZ(250px) translateY(165px);
-o-transform: rotateY(330deg) translateZ(250px) translateY(165px);
transform: rotateY(330deg) translateZ(250px) translateY(165px);
}
img{
width: 100px;
height: 150px;
}
</style>
</head>
<body>
<div class="warp">
<div class="all">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>

0 0