ブログパーツとか: CSSシミュレータ（transform）

【使い方】textareaの中身（値）を書き換えて色々と試してみる

①X軸方向への移動 / translateX
　正の数が右、負の数が左

②Y軸方向への移動 / translateY
　正の数が下、負の数が上

③X軸方向への伸縮 / scaleX
　0で消失

④Y軸方向への伸縮 / scaleY
　0で消失

⑤X軸の回転角度 / rotateX
　±90degで消失
　　180deg=-180degで上下反転

⑥Y軸の回転角度 / rotateY
　±90degで消失
　180deg=-180degで左右反転

⑦Z軸の回転角度 / rotateZ
　180deg=-180degで上下左右反転

⑧X軸方向への傾斜角度 / skewX
　0deg=±180deg
　±90deg、±270degで消失

⑨Y軸方向への傾斜角度 / skewY
　0deg=±180deg
　±90deg、±270degで消失

HTML

<div id="transformDisplay"></div>

<⚠textarea id="transformTextarea" oninput="transformSimulator();" style="height:300px;width:99%;font-family:monospace;"><style>
#transformDisplay {
    border:1px solid;
    transform: translateX( 0px )         /*①X軸方向への移動*/
               translateY( 0px )         /*②Y軸方向への移動*/
               scaleX( 1.0 )             /*③X軸方向への伸縮*/
               scaleY( 1.0 )             /*④Y軸方向への伸縮*/
               rotateX( 0deg )           /*⑤X軸の回転角度*/
               rotateY( 0deg )           /*⑥Y軸の回転角度*/
               rotateZ( 0deg )           /*⑦Z軸の回転角度*/
               skewX( 0deg )             /*⑧X軸方向への傾斜角度*/
               skewY( 0deg );            /*⑨Y軸方向への傾斜角度*/
   }
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqy0rWRC0_9x0PAyeIJ8hupppRiSQVVgDoUZF7DnoPdRx7diE3hnlSGUFZH3ffqgz-2M9d-UpnNyrTLdyoOos_N70m2Wng78FMMZqF-u5Y94Ew_9T7v_-L6rOqNM66CtboAxKgV7bhVklo/s1600/8465549010_6c351e30f5_o.jpg" style="width:50%;height:auto;border:0;"><br />
<div>多用途ヘリコプター　略称「UH-60JA」　愛称「ブラックホーク」<br />
空中機動作戦および災害派遣等に使用する次期多用途ヘリとして、UH-1Jと併行装備を進めることとして、平成7年度に取得に着手し、平成10年1月22日、航空学校に初号機が配備された。部隊配備は11年度から開始した。<br />
<a href="https://www.mod.go.jp/gsdf/equipment/air/index.html" target="_blank">出典：陸上自衛隊　装備　航空機</a></div>
<⚠/textarea><!--⚠は削除する-->

JavaScript

<script>
var transformSimulator=function(){
    document.getElementById("transformDisplay").innerHTML=document.getElementById("transformTextarea").value;
   }
onLoad=transformSimulator();
</script>

2020年3月27日金曜日

CSSシミュレータ（transform）