CSS3 3D图像转换结合
嘿所有我已经过这个不错的效果跑了3D图像hereCSS3 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;
});
但它不是很流畅....
这些都是不错的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">
感谢您的评论,arttronics的URL。我正在做那样的事情。检查我的演示的URL的OP。 – StealthRT
可以肯定这是我提供的答案,希望有用。我看了你的上面的例子,这将是另一种**解决方法**这个问题。出于好奇,是否排除IE9和Firefox计划的一部分?考虑使用Demo的标记来构建跨浏览器插件。再次,使用[**。transit **](http://ricostacruz.com/jquery.transit/)jQuery插件及其回调函数可以允许连接效果。 – arttronics
我现在看了一下这个网站的链接,发现它非常糟糕,所以这个方法可能有问题,需要插件初始化CSS。另外,请考虑使用准备好的插件,如[** jQuery Cycle **](http://jquery.malsup.com/cycle/),它具有一些相同的3D动画。找到其他3D动画的插件,然后在网页上使用效果库...这两个插件都可以同时加载。 – arttronics
你是什么意思结合起来? – ddlshack
@ddlshack:将所有效果放到一个页面中,而不是每个效果都是不同的html页面。 – StealthRT
在同一页上的不同图像上? – ddlshack