ねえ、私はここで 3D 画像のこの素敵な効果に出くわしました
問題は、エフェクトのセットごとに html ページを作成する代わりに、すべてのエフェクトを 1 つのページに結合する方法を見つけようとしているところです (フリップ、回転、マルチフリップ、キューブ、展開、その他)。
このタスクを達成する方法を教えてもらえますか? 効果ごとに異なる CSS スタイルを使用しているようで、style1-6.css を 1 つのページに結合できないか、すべての効果が台無しになります。
更新 私は現在これを行うことができます:
$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;
});
しかし、それはあまり滑らかではありません....