css3 animate寫的超炫3D轉換

來源:互聯網
上載者:User

標籤:lis   lan   onclick   class   url   webkit   document   no-repeat   str   

上一篇中介紹了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轉換

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.