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">