transformプロパティのperspective()は、3D変形の遠近効果を調節する際に使用します。
奥行きの深さは数値で指定します。
transform:perspective(数値) の指定は、
基本的にはperspectiveプロパティによる指定と同じです。
p.sample1 {background-color:limegreen;}
p.sample1 img {
transform: perspective(200);
transform: rotateY(70deg);
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>
transform: perspective(200);を指定して、Y軸70度回転<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
<p class=”sample2″>
transform: perspective();の指定なしで、Y軸70度回転<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
</body>
</html>
transform: perspective(200);を指定して、Y軸70度回転
transform: perspective();の指定なしで、Y軸70度回転
p.prefix_sample1, p.prefix_sample2 {background-color:limegreen;}
p.prefix_sample1 img {
-moz-transform: perspective(200);
-webkit-transform: perspective(200);
-o-transform: perspective(200);
-ms-transform: perspective(200);
-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
}
p.prefix_sample2 img {
-moz-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
}
<html>
<head>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”prefix_sample1″>
perspective(200)<br>
<img src=”https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/kaeru.gif”>
</p>
</body>
</html>
transform: perspective(200);を指定して、Y軸70度回転
transform: perspective();の指定なしで、Y軸70度回転
