CSS3 3D 图像过渡相结合

Question

嘿，我在这里遇到了这个很好的 3D 图像效果

问题是，我试图弄清楚如何将所有效果组合到一个页面中，而不是为每组效果（翻转，旋转，多翻转，立方体，展开和其他）提供一个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

这些只是webkit的很好的3D过渡（例如，没有Firefox）。请注意，这不是一个完整的插件解决方案，而是概念证明，这就是为什么当它们都在同一页面上时它不起作用的原因。每个效果都可以提升，并通过跨浏览器版本组合使用您想要的方式使用。

由于它们是 style1-6.css 文件中使用方式不同的一些 CSS 属性，因此有三种方法可以解决此问题。

第一种方法是对主页使用 iframes 并分别加载每个.css文件。缺点是某些效果将仅包含在 iframe 中。

更好的方法是需要动态设置用于所有效果的通用/基本CSS样式。这些可以通过编程jQuery进行设置，以处理只有"效果"CSS规则（例如，Flip1，Flip2，Rotate1等）的style1-.css 6文件。

另一种方法是重新编码实验性 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">