这个能用纯css3 实现吗如果能有人能提供代码吗-慕课网

首页课程实战体系课手记专栏慕课教程

这个能用纯css3 实现吗如果能有人能提供代码吗

来源：3-2 JS部分

铭天更精彩

2016-11-12 21:01

怎么用纯css3实现

写回答关注

2回答

慕粉3727206

2016-12-14 21:58:16

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)";
}

0 0
将书

2016-11-15 21:15:15
<!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>
1 0

铭天更精彩

这个4和6出不来感觉让它自动执行这样好点

2016-11-16 09:21:33

共 1 条回复 >