css3制作魔方

来源：互联网发布：数据库的导入和导出编辑：程序博客网时间：2024/05/22 13:16

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>魔方</title>
<style>
body{
/*启用3d_1*/
perspective: 1000px;
background-color: #000;
}
.warp{

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

-webkit-transition: all 20s;
-o-transition: all 20s;
transition: all 20s;
}
.warp:hover{
-webkit-transform: rotateZ(3000deg);
-ms-transform: rotateZ(3000deg);
-o-transform: rotateZ(3000deg);
transform: rotateZ(3000deg);
}
.all{
width: 200px;
height: 200px;

margin:100px auto;
position: relative;

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

-webkit-transform: rotateX(30deg) rotateY(30deg);
-ms-transform: rotateX(30deg) rotateY(30deg);
-o-transform: rotateX(30deg) rotateY(30deg);
transform: rotateX(30deg) rotateY(30deg);
}
.all div{
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
font-size: 50px;
text-align: center;
line-height: 200px;
opacity: 0.5;
}
.all div:nth-child(1){
background-color: green;
-webkit-transform: rotateX(90deg) translateZ(100px) ;
-ms-transform: rotateX(90deg) translateZ(100px) ;
-o-transform: rotateX(90deg) translateZ(100px) ;
transform: rotateX(90deg) translateZ(100px) ;
}
.all div:nth-child(2){
background-color: #ddd;
-webkit-transform: rotateY(90deg) translateZ(100px);
-ms-transform: rotateY(90deg) translateZ(100px);
-o-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.all div:nth-child(3){
background-color: pink;
-webkit-transform: rotateZ(90deg) translateZ(100px);
-ms-transform: rotateZ(90deg) translateZ(100px);
-o-transform: rotateZ(90deg) translateZ(100px);
transform: rotateZ(90deg) translateZ(100px);
}

.all div:nth-child(4){
background-color: red;
-webkit-transform: rotateX(90deg) translateZ(-100px);
-ms-transform: rotateX(90deg) translateZ(-100px);
-o-transform: rotateX(90deg) translateZ(-100px);
transform: rotateX(90deg) translateZ(-100px);

}
.all div:nth-child(5){
background-color: orange;
-webkit-transform: rotateY(90deg) translateZ(-100px);
-ms-transform: rotateY(90deg) translateZ(-100px);
-o-transform: rotateY(90deg) translateZ(-100px);
transform: rotateY(90deg) translateZ(-100px);
}
.all div:nth-child(6){
background-color: blue;
-webkit-transform: rotateZ(90deg) translateZ(-100px);
-ms-transform: rotateZ(90deg) translateZ(-100px);
-o-transform: rotateZ(90deg) translateZ(-100px);
transform: rotateZ(90deg) translateZ(-100px);
}
</style>
</head>
<body>
<div class="warp">
<div class="all">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>

0 0