之前看过一些复杂翻转轮播的实现，结果发现实现思路与自己的想法大相径庭。其中每一个翻转体（立方体）的实现还是很简洁易懂的，在此记录下来。代码直接奉上，亲测可用哦。
<html>
<head>
<meta charset="utf-8">
<title>cube3D立方体</title>
</head>
<body>
<div id="cube">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
body{
margin:0px;
padding:0px;
perspective: 1000px; /*设置景深*/
transform-style: preserve-3d;
}
#cube{
position:relative;
top:40%;
left:0;
width: 200px;
height:200px;
border:1px solid #333;
margin:0px auto;
transform-style: preserve-3d;
transform-origin: 50% 50% -101px;
transform: rotateY(0deg);
transition-timing-function:
}
#cube:hover{
transform: rotateY(360deg);
transition: 5s;
}
#cube div{
position:absolute;
width: 200px;
height:200px;
border:1px solid red;
}
#cube div:nth-child(1){
position:absolute;
top:0px;
}
#cube div:nth-child(2){
position:absolute;
top:-202px;
transform-origin:50% 100%;
transform:rotateX(90deg);
}
#cube div:nth-child(3){
position:absolute;
top:202px;
transform-origin:50% 0;
transform:rotateX(-90deg);
}
#cube div:nth-child(4){
position:absolute;
left:-202px;
transform-origin:100% 50%;
transform:rotateY(-90deg);
}
#cube div:nth-child(5){
position:absolute;
left:202px;
transform-origin:0 50%;
transform:rotateY(90deg);
}
#cube div:nth-child(6){
position:absolute;
top:0px;
transform: translateZ(-202px);
}
2871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
