0

嘿，我在这里遇到了 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

4

1 回答 1

0

这些只是 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">
于 2012-06-11T21:51:29.230 回答