パンくず
CSS3新要素
2D 3D 変形
transform:perspective
概要
要素の奥行きの深さを指定するtransform:perspectiveについて説明します
プロパティ名
transform:perspective()
※2012/03/26現在、ベンダープリフィックスが必要
内容
要素の深度を設定します
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>transform:perspective</title> <style type="text/css"> p { border-style:dashed; border-width:1px; border-color:#000; background-color:gray; width:200px; height:100px; padding-left:100px; } p.container1 img { transform:perspective(15); -webkit-transform:perspective(15); -moz-transform:perspective(15); -ms-transform:perspective(15); -o-transform:perspective(15); -moz-transform: rotateY(70deg); -webkit-transform: rotateY(70deg); -o-transform: rotateY(70deg); -ms-transform: rotateY(70deg); } </style> </head> <body> transform:perspective(15); <p class="container1"><img class="transform-perspective1" src="transform-perspective.png" alt="" /></p> </body> </html>