質問がありましたので・・・
HTMLとSCCだけに拘ったネタの連載を作ってみました。
1回目は、HTMLとCSSだけで画像の変形表示です。ブラウザによっては表示しないようですが、ChromeとSafariでは正常な表示を確認しています。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body bgcolor="#98fb98">
<center>
<div class="pic-root">
<img class="pic-scale"
src="image/y_fish.jpg" alt="魚のイラスト">
</div>
</center>
</body>
</html>
<!-- index.html -->
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
/* 以下は、HTMLの<div class="">の部分で指定 */
.pic-root {
perspective: 1000px;
}
/* 以下は、<img class=""> の部分で指定 */
.pic-rotate_x{
transform: rotateX(45deg);
}
.pic-rotate_y{
transform: rotateY(45deg);
}
.pic-rotate_z{
transform: rotateZ(45deg);
}
.pic-scale {
transform: scale3d(1,0.5,1);
}
/* rule.css */
注意点は・・・
特に難しいい事はなにもなく、degの値と変化を把握し・・・
［perspective］はZ軸の画像までの距離ですが、平面なので把握は難しいですが利用画像のサイズが800×600pxなので、大体1000ぐらいでいい感じと開き直っています。
［scale3d］の3つの値は（x,y,z）の値ですが、［transform: rotate］を指定しない限りZ値は0以外なら何でもOKです。
