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规则的 style1-6.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">

CSS3 3D图像过渡相结合

1 个答案: