CSS3 3D圖像轉換結合

Question

嘿所有我已經過這個不錯的效果跑了3D圖像here

問題是，我試圖弄清楚如何將所有效果組合成一個頁面，而不必爲每個html頁面效果設置（翻轉，旋轉，多重翻轉，立方體，展開&其他）

能不能讓我知道如何完成這項任務？它似乎爲每個效果使用了不同的CSS樣式，而我無法將style1-6.css合併到一個頁面中，否則它會弄亂所有效果。

更新 我目前可以做到這一點：

$navNext.on('click', function(event) { 
var randNum = Math.floor (Math.random() * wPerspective.length) 

$type = wPerspective[randNum]; 
type = wPerspective[randNum]; 

$("LINK[href*='css/style1.css']").remove(); 
$("LINK[href*='css/style2.css']").remove(); 
$("LINK[href*='css/style3.css']").remove(); 
$("LINK[href*='css/style4.css']").remove(); 
$("LINK[href*='css/style5.css']").remove(); 
$("LINK[href*='css/style6.css']").remove(); 

var $$ = document; 
var head = $$.getElementsByTagName('head')[0]; 
var link = $$.createElement('link'); 

link.id = 'myCss'; 
link.rel = 'stylesheet'; 
link.type = 'text/css'; 
link.media = 'all'; 

console.log(type + ' | ' + type.indexOf("te-flip")); 

if (type.indexOf("te-flip") == 0) 
{ 
     link.href = 'css/style1.css'; 
}else if (type.indexOf("te-rotation") == 0) 
{ 
    link.href = 'css/style2.css'; 
}else if (type.indexOf("te-multiflip") == 0) 
{ 
    link.href = 'css/style3.css'; 
}else if (type.indexOf("te-cube") == 0) 
{ 
    link.href = 'css/style4.css'; 
}else if (type.indexOf("te-unfold") == 0) 
{ 
    link.href = 'css/style5.css'; 
}else if (type.indexOf("te-example") == 0) 
{ 
    link.href = 'css/style6.css'; 
} 

head.appendChild(link);    
$teTransition.addClass(type); 

if(hasPerspective && animated) 
    return false; 

animated = true;  
showNext(); 
return false; 

}); 

但它不是很流暢....

我的演示頁http://june3rdsoftware.com/trans/index.html

Answer 1

這些都是不錯的3D轉換僅webkit（例如，沒有Firefox）。請注意，這不是一個完整的插件解決方案，但是概念證明就是爲什麼當它們都在同一頁面上時它不起作用。每種效果都可以通過跨瀏覽器版本的組合來提升和使用。

由於他們是在使用不同的style1-6.css文件的某些CSS屬性，有的方式來處理這個問題。

第一種方法是使用iframes主頁，並分別加載每個.css文件。缺點是某些效果只會包含在iframe中。

更好的方法將需要動態設置，用於所有效果的通用/基CSS樣式。這些可以通過編程jQuery的設置與style1-6.css工作文件只有「效果」 CSS規則（例如，Flip1，Flip2，Rotate1等）。

另一種方法將是重新編寫實驗CSS3項目，這樣它不是那麼實驗了不容許對相同的CSS屬性的跨腳本污染。 簡單的方法：然後每6代樣式表的將是6個獨立.js files是的，這意味着下載腳本6次不同的口味，因爲你已經在6種口味下載CSS文件。每個.js file與修改相應的.css file一起被修改，因此不發生交叉污染。 硬辦法：重新編碼的.js文件，允許沒有問題，所有效果。

簡單的方法舉例：

<!-- The script is modded so that -1 means 1.css is used --> 
<div id="te-wrapper-1" class="te-wrapper-1"> 

<!-- The script is modded so that -2 means 2.css is used --> 
<div id="te-wrapper-2" class="te-wrapper-2">