您的位置：首页 > Web前端 > CSS

css 3D相册，旋转木马练习

2016-03-22 16:48 483 查看

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/whirligig.css">
<script src="../js/jquery-2.1.4.min.js"></script>
<title>旋转的木马</title>
<style id="dynamic"></style>
</head>
<body>
<input type="hidden" id="topPage" value="0">
<div id="space3d">
<div id="pagegroup">
<img class="page page0" id="0" src="../images/cute/1.jpg" alt="夕月">
<img class="page page1" id="1" src="../images/cute/2.jpg" alt="绿草">
<img class="page page2" id="2" src="../images/cute/3.jpg" alt="夕阳">
<img class="page page3" id="3" src="../images/cute/4.jpg" alt="花女">
<img class="page page4" id="4" src="../images/cute/5.jpg" alt="冷夜">
<img class="page page5" id="5" src="../images/cute/6.jpg" alt="海阳">
<img class="page page6" id="6" src="../images/cute/7.jpg" alt="熏衣">
<img class="page page7" id="7" src="../images/cute/8.jpg" alt="夕云">
</div>
</div>

<script>
$(function(){
$(".page").click(function(){
// javascript 类选择器..
var _topPage = document.getElementById("topPage");
var _pagegroup = document.getElementById("pagegroup");
var _style = document.getElementById("dynamic"); // 本页面 style
var myRules = document.styleSheets[0].rules; // 外部style

var topPage = _topPage.value-0;  // 最前面page的id
var clickPage = parseInt(this.id); // onclick page
console.log("topPage:"+topPage+","+"clickPage"+clickPage);

/* 修改外部css, myRules[3].cssText = '.a {color: green;}'; */
myRules[3].style.transform = "rotateY("+(clickPage)*45+"deg)"; // 修改外部css

/* 修改本页面css */
_style.innerHTML = "@-webkit-keyframes rotateYleft{0%{transform:rotateY("+(topPage)*45
+"deg);} 100% {transform:rotateY("+((clickPage+7)%8+1)*45+"deg);} }\n";
_topPage.setAttribute("value", clickPage);
_pagegroup.className = "pagegroup1";
window.setTimeout(function(){
_pagegroup.className = 'pagegroup2'},1000);

})
})
</script>
</body>
</html>

css

@CHARSET "UTF-8";

#space3d {
-webkit-perspective: 2000px;
prespective:2000px;
-webkit-perspective-origin: 50% 10%;
prespective-orogin:50% 10%;
}
#pagegroup {
position: relative;
top: 200px;
margin: 0 auto;
width: 420px;
height: 262px;
transform-style: preserve-3d;
}
.pagegroup1 {
animation-name: rotateYleft;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.pagegroup2 {
transform:rotateY(0);
transition: transform;
}
.page {
position: absolute;
width: 420px;
height: 262px;
cursor: pointer;
}
.page0 {
transform: translateZ(600px);
}
.page7 {
transform: rotateY(45deg) translateZ(600px);
}
.page6 {
transform: rotateY(90deg) translateZ(600px);
}
.page5 {
transform: rotateY(135deg) translateZ(600px);
}
.page4 {
transform: rotateY(180deg) translateZ(600px);
}
.page3 {
transform: rotateY(225deg) translateZ(600px);
}
.page2 {
transform: rotateY(270deg) translateZ(600px);
}
.page1 {
transform: rotateY(315deg) translateZ(600px);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航