1
2
3
4
5
6
1.设置基准点，景深。
-webkit-perspective-origin:center -150px; -webkit-perspective:300px;
2.建立3D空间。
-webkit-transform-style:preserve-3d;
3.布局。
<div id="wrap">
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
#wrap .main div{
width:100px;
height:100px;
text-align: center;
line-height: 100px;
position:absolute;
font-size: 50px;
color:white;
opacity:.8;
-webkit-transition:2s;
}
#wrap .main div:nth-of-type(1){
top:0;
left:0;
background:red;
}
#wrap .main div:nth-of-type(2){
top:-100px;
left:0;
background:orange;
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(-90deg);
}
#wrap .bd div:nth-of-type(3){
top:0px;
left:-100px;
background:yellow;
-webkit-transform-origin:right;
-webkit-transform:rotateY(90deg);
}
#wrap .main div:nth-of-type(4){
top:0px;
left:100px;
background:green;
-webkit-transform-origin:left;
-webkit-transform:rotateY(-90deg);
}
#wrap .main div:nth-of-type(5){
top:100px;
left:0px;
background:blue;
-webkit-transform-origin:top;
-webkit-transform:rotateX(90deg);
}
#wrap .main div:nth-of-type(6){
top:0;
left:0;
background:purple;
-webkit-transform:translateZ(100px);
}
4.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>立方体</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<style>
@-webkit-keyframes move { //关键帧
0% {
-webkit-transform:rotateY(0deg);
}
25% {
-webkit-transform:rotateY(90deg);
}
50% {
-webkit-transform:rotateY(180deg);
}
75% {
-webkit-transform:rotateY(270deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
body{
-webkit-transform-style:preserve-3d;
}
#wrap{
width:100px;
height:100px;
margin:10px auto;
padding:50px;
border:1px solid red;
-webkit-perspective:300px; //景深
-webkit-perspective-origin:center -150px; //基准点
}
#wrap .main{
position:relative;
transition:2s;
-webkit-transform-style:preserve-3d;
-webkit-animation: move 5s infinite linear; //动画
}
#wrap .main div{
width:100px;
height:100px;
text-align: center;
line-height: 100px;
position:absolute;
font-size: 50px;
color:white;
opacity:.8;
-webkit-transition:2s;
}
#wrap .main div:nth-of-type(1){
top:0;
left:0;
background:red;
}
#wrap .main div:nth-of-type(2){
top:-100px;
left:0;
background:orange;
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(-90deg);
}
#wrap .main div:nth-of-type(3){
top:0px;
left:-100px;
background:yellow;
-webkit-transform-origin:right;
-webkit-transform:rotateY(90deg);
}
#wrap .main div:nth-of-type(4){
top:0px;
left:100px;
background:green;
-webkit-transform-origin:left;
-webkit-transform:rotateY(-90deg);
}
#wrap .main div:nth-of-type(5){
top:100px;
left:0px;
background:blue;
-webkit-transform-origin:top;
-webkit-transform:rotateX(90deg);
}
#wrap .main div:nth-of-type(6){
top:0;
left:0;
background:purple;
-webkit-transform:translateZ(100px);
}
</style>
<div id="wrap">
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</body>
</html>
时间： 2024-08-07 21:19:57