这个 能用纯css3 实现吗 如果能 有人能提供代码吗
怎么用纯css3实现
2 回答
var curIndex = 1 ;
function prev() {
if(curIndex == 1) return;
var curPage = document.getElementById("page" + curIndex);
curPage.style.webkitTransform = "rotateX(90deg)";
curIndex--;
var prevPage = document.getElementById("page" + curIndex);
prevPage.style.webkitTransform = "rotateX(0deg)";
}
function next() {
if(curIndex == 6) return;
var curPage = document.getElementById("page" + curIndex);
curPage.style.webkitTransform = "rotateX(-90deg)";
curIndex++;
var nextPage = document.getElementById("page" + curIndex);
nextPage.style.webkitTransform = "rotateX(0deg)";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D正方体</title>
<style type="text/css">
.main {
margin: 100px auto;
width: 100px;
height: 100px;
position: relative;
/*3D设置*/
perspective: 600px;
perspective-origin: 50% 50%;
transition: all 1s;
transform-origin: center;
transform-style: preserve-3d;
}
section {
width: 100px;
height: 100px;
transition: all 3s;
transform-style: preserve-3d;
}
.item {
position: absolute;
width: 100px;
height: 100px;
color: white;
background-color: rgba(0,0,0,1);
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 100px;
z-index: 10;
}
.item:nth-child(1) {
}
.item:nth-child(2) {
transform-origin: right;
transform: rotateY(90deg);
}
.item:nth-child(3) {
transform-origin: left;
transform: rotateY(-90deg);
}
.item:nth-child(4) {
transform-origin: bottom;
transform: rotateX(-90deg);
}
.item:nth-child(5) {
transform-origin: top;
transform: rotateX(90deg);
}
.item:nth-child(6) {
z-index: 100;
transform: translateZ(100px);
}
section:hover {
transform-origin: left;
/*transform:rotate3d(0,1,1,45deg);*/
transform: rotateY(280deg);
}
</style>
</head>
<body>
<div class="main">
<section>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</section>
</div>
</body>
</html>
举报
0/150
提交
取消
