0

パースペクティブで移動および回転しようとする div 要素がいくつかあります。

フィドル: http://fiddle.jshell.net/nu6EA/

このコードは FF 24.0 では問題なく動作しますが、Chrome 30.0.1599.101 ではいくつかの問題があります。興味深いのは、赤い div の遷移で私が望んでいたことを達成したことですが、黒い div の遷移は奇妙です。回転し始めますが、正しい方向にはならず、滑らかではありませんが、遷移の終わりに回転します。

コード：

HTML: <div class="left"></div><div class="center"></div> <div id="right"></div>

JS:

 var left = $(".left");

left.toggleClass("block");

left.animate({
    opacity: 1,
    left: "+=200",
    height: "200px",
    top: "0"
}, 4000, function () {
    // Animation complete.
});

var center = $(".center");

center.toggleClass("go-left");
center.animate({
    opacity: 0.3,
    left: "-=200",
    height: "180px",
    top: "10px",
}, 4000, function () {
    // Animation complete.
});

CSS:

body {
margin: 55px;}
.left {
left: 0;
opacity: 0.3;
position: relative;
float: left;
width: 200px;
height: 180px;
top: 10px;
background-color: red;
outline: 1px solid transparent;
-moz-transform: perspective( 600px ) rotateY( -45deg );
-ms-transform: perspective( 600px ) rotateY( -45deg );
-o-transform: perspective( 600px ) rotateY( -45deg );
-webkit-transform: perspective( 600px ) rotateY( -45deg );
transform: perspective( 600px ) rotateY( -45deg );
-moz-transition: all 5s;
-o-transition: all 5s;
-webkit-transition: all 5s;
transition: all 5s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.block {
float: left;
width: 200px;
position: relative;
background-color: red;
outline: 1px solid transparent;
-moz-transform: perspective( 600px ) rotateY( 0deg );
-ms-transform: perspective( 600px ) rotateY( 0deg );
-o-transform: perspective( 600px ) rotateY( 0deg );
-webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg );
}

.go-left {
left: 0;
position: relative;
float: left;
width: 200px;
background-color: black;
outline: 1px solid transparent;
-moz-transform: perspective(600px) rotateY( -45deg );
-ms-transform: perspective( 600px ) rotateY( -45deg );
-o-transform: perspective( 600px ) rotateY( -45deg );
-webkit-transform: perspective( 600px ) rotateY( -45deg );
transform: perspective( 600px ) rotateY( -45deg );
/*-moz-transition: all 5s;
-o-transition: all 5s;
-webkit-transition: all 5s;
transition: all 5s;

-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;*/
}

.center {
position: relative;
height: 200px;
width: 200px;
background-color: black;
float: left;
outline: 1px solid transparent;
-moz-transition: all 3s;
-o-transition: all 3s;
-webkit-transition: all 3s;
transition: all 3s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

#right {
float: left;
width: 200px;
height: 200px;
background-color: blue;
transform: perspective( 600px ) rotateY( 135deg );
outline: 1px solid transparent;
}

これがフィドルデモから期待されることを行う正しい方法であるかどうかも知りたいです。

4

1 に答える 1

1

preserve-3d とパースペクティブをどこにでも配置する必要はありません。共通の親要素 (ボディ) に配置するだけで済みます。また、ボディに共通の変換原点が必要なので、すべてが同じ視点になります。#right には -webkit バージョンの変換はありません。これらの問題を修正すると、Chrome で適切な動作が得られますが、おそらく変換元を調整する必要があります。

http://fiddle.jshell.net/fcxjM/

于 2013-10-18T20:04:25.187 に答える