css3 animate寫的超炫3D轉換
上一篇中介紹了animate的基本的屬性，這一篇講的則是關於animate以及transforms的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3超炫3維轉換</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.box li{
list-style: none;
}
.out{
width: 800px;
height: 400px;
margin: 100px auto;
position: relative;
/*perspective: 1000px;*/
}
.box{
width: 800px;
height: 100px;
transform-style: preserve-3d;
position: absolute;
transform-origin: center center 25px;
transition: 2s all ease-in-out;
}
.box li{
position: absolute;
}
ul li:nth-of-type(1){
width: 800px;
height: 50px;
top: -50px;
background-color: #eaeaea;
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(-90deg);
}
ul li:nth-of-type(2){
height:100px;
width: 50px;
left: -50px;
background-color: #eaeaea;
-webkit-transform-origin: right;
-webkit-transform: rotateY(90deg);
}
ul li:nth-of-type(3){
height: 100px;
width: 800px;
-webkit-transform-origin: center;
-webkit-transform: rotateY(180deg);
background: url(3D2.jpg)no-repeat;
}
ul li:nth-of-type(4){
height: 100px;
width: 50px;
left: 800px;
background-color: #eaeaea;
-webkit-transform-origin: left;
-webkit-transform: rotateY(-90deg);
}
ul li:nth-of-type(5){
width: 100px;
height: 50px;
top:100px;
background-color: #eaeaea;
-webkit-transform-origin: top;
-webkit-transform: rotateX(90deg);
}
ul li:nth-of-type(6){
height: 100px;
width: 800px;
background:url(3D3.jpeg)no-repeat;
}
#btn{
width: 100px;
background-color: black;
border-radius: 5px;
margin: 0 auto;
color:white;
font: 20px/40px"微軟雅黑";
text-align: center;
cursor: pointer;
}
</style>
<script src="css3.js"></script>
<script>
/*
實現目標效果： 1.將圖片分成四部分，則每部分的高度為100px，添加進out中
2.添加鼠標事件
*/
window.onload = function (){
var out = document.getElementById(‘out‘);
add(out);
var btn = document.getElementById(‘btn‘);
var box =document.getElementsByTagName(‘ul‘);
var angle = 0;
btn.onclick=function (){
angle+=180;
if(angle>180)angle=0;
for(var j = 0;j<4;j++){
setCss3(box[j],{transform:"rotateY("+angle+"deg)"});
}
}
}
//添加box的函數
function add(obj){
// 創建一個數組，然後通過for添加一個四個ul對象；
var str = ‘‘;
for(var i=0;i<4;i++){
str+=‘<ul class="box" style="top:‘+i*100+‘px;transition-delay:‘+i/4+‘s"><li></li><li></li><li style="background-position:0px ‘+-i*100+‘px;"></li><li></li><li></li><li style="background-position:0px ‘+-i*100+‘px;"></li></ul>‘;
}
//將str數組添加在obj中
obj.innerHTML=str;
}
</script>
</head>
<body>
<!-- 實現圖片的分割3D旋轉效果
實現的效果：1.點擊按鈕的時候，圖片翻轉，並且是分割式旋轉180度。
實現的步驟： 1.布局，布局3D盒子，並將圖片放置在盒子的正面和反面，設置好盒子的樣式。
2.將不知的布置的盒子樣式保留，去掉body中的標簽。
3.通過javascript添加四個盒子，每個盒子中背景圖片都是同一張圖片，並通過設置背景圖片的position來控制每個盒子顯示出不同的位置。
4.鼠標點擊事件，每次翻轉角度為180度。通過改變過渡模式來使圖片實現分割式旋轉
-->
<div class="out" id="out">
</div>
<div id="btn">更換</div>
</body>
</html>
可以直接復制使用
css3 animate寫的超炫3D轉換