<スタイル>
.door {
幅：288px;
高さ：153px;
ボーダー：2ピクセル固体＃333;
マージン：150ピクセルのオート;
背景：URL（../ IMG / 01.png）ノー・リピート;
位置：相対;
視点：500pxなど。/ *设置盒子透明* /
}
.door-L、
.door-R {
位置：絶対。
トップ：0;
幅：50％;
高さ：100％;
背景：ピンク;
トランジション：すべて1。/ *盒子过渡效果* /
}
.door-R {
右：0。
ボーダー左：2ピクセル固体＃333。
変換-起源：右; / *カセット右側*で回転されるセット/
}
.door {L-
左：0;
ボーダー右：2ピクセル固体＃333;
変換-起源：左; / *設定カセットが左側* /に回転させる
}
.door-L ::前に、
.door :: {-R＆LT前
コンテンツ： "";
位置：絶対;
トップ：50％;
幅：20ピクセル、
高さ20ピクセル、
ボーダー：ソリッド1ピクセル＃000;
ボーダーRADIUS：50％;
変換：移動Y、（-50％）; / * * /垂直方向にカセットを設定
}
.door-R＆LT前:: {
左：5pxの;
}
.door-Lを::前{
右：5pxの; / * * /ドアキャッチの位置を設定
}
.door：ホバー{.door-L
変換：回転Y（-130deg）;
}
.door：ホバー{R＆LT .door-
変換：回転Y（130deg）; / *角度のドアに配置されたY軸* /に沿って回転される
}
</スタイル>
</ head>
<body>
<DIV CLASS = "ドア">
<DIV CLASS = "ドア-L"> </ div>
<DIV CLASS =「ドア-r「> </ div>
</ div>
</ BODY>