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

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

由于它们是那些 style1-6.css 文件中使用不同的一些 CSS 属性，因此有 三种 方法来处理。

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

更好的方法是动态设置用于所有效果的通用/基本 CSS 样式。这些可以通过程序化 jQuery 进行设置，以使用仅具有“效果”CSS 规则（例如，Flip1、Flip2、Rotate1 等）的 style1-6.css 文件。

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