CSS3 3D Transformsの表示テスト

2013年7月31日追記: transform-styleの指定を適切なセレクタに移動。Firefox、Opera、IE用の記述も追加。

Safari、Chrome、Firefox、Opera、IE用のCSS3 3D Transforms Module 3の表示テスト。 2013年7月31日現在、ChromeとFirefoxではZバッファがおかしい、Operaは3次元回転しない、IEはチェックしていないがIE10では動くという情報もある。

ちなみに、Safariでも、Windowsだとグラフィックカードなどによっては3D表示に対応しない: 「CSS3の3D表示機能が、実はSafariでも使えないことがある件 」

コードは以下。

CSS

#wrapper {
 position: relative;
 width: 200px;
 height: 200px;
 padding: 50px;
 border: 1px solid black;
 transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
}
#panel1, #panel2 {
 position: absolute;
 width: 200px;
 height: 200px;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 animation-duration: 8s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -webkit-animation-duration: 8s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: linear;
 -moz-animation-duration: 8s;
 -o-animation-iteration-count: infinite;
 -o-animation-timing-function: linear;
 -o-animation-duration: 8s;
 -ms-animation-iteration-count: infinite;
 -ms-animation-timing-function: linear;
 -ms-animation-duration: 8s;
}
#panel1 {
 background-color: red;
 animation-name: rotate1;
 -webkit-animation-name: rotate1;
 -moz-animation-name: rotate1;
 -o-animation-name: rotate1;
 -ms-animation-name: rotate1;
}
#panel2 {
 background-color: blue;
 animation-name: rotate2;
 -webkit-animation-name: rotate2;
 -moz-animation-name: rotate2;
 -o-animation-name: rotate2;
 -ms-animation-name: rotate2;
}
@keyframes rotate1 {
 0% { transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@keyframes rotate2 {
 0% { transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-webkit-keyframes rotate1 {
 0% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-webkit-keyframes rotate2 {
 0% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -webkit-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-moz-keyframes rotate1 {
 0% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-moz-keyframes rotate2 {
 0% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -moz-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-o-keyframes rotate1 {
 0% { -o-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -o-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -o-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-o-keyframes rotate2 {
 0% { -o-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -o-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -o-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}
@-ms-keyframes rotate1 {
 0% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(90deg) }
 50% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(270deg) }
 100% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(450deg) }
}
@-ms-keyframes rotate2 {
 0% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(0deg) }
 50% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(180deg) }
 100% { -ms-transform: perspective(100px) translateZ(-100px) rotateY(360deg) }
}

HTML

<div id="wrapper">
<div id="panel1">
</div>
<div id="panel2">
</div>
</div>