translate() メソッド
これは DIV 要素です。
これは DIV 要素です。
<!DOCTYPE html> <html> <head> <link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'> <style> div.trans{ width:100px; height:75px; background-color:#3399FF; border:1px solid #0066FF; } #trans2{ -ms-transform:translate(50px,100px); /* IE 9 */ -webkit-transform:translate(50px,100px); /* Chrome, Safari, Opera */ transform:translate(50px,100px); /* Standard syntax */ } </style> </head> <body> <h3>translate() メソッド</h3> <div class="trans">これは DIV 要素です。</div> <div id="trans1" class="trans">これは DIV 要素です。</div> <br><br><br><br><br> </body> </html>
rotate() メソッド
これは DIV 要素です。
これは DIV 要素です。
<!DOCTYPE html> <html> <head> <style> div.rotate{ width:100px; height:75px; background-color:#3399FF; border:1px solid #0066FF; color:#FFFFFF; } #rotate2{ -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Chrome, Safari, Opera */ transform:rotate(30deg); /* Standard syntax */ } </style> </head> <body> <h3>rotate() メソッド</h3> <div class="rotate">これは DIV 要素です。</div> <div id="rotate1" class="rotate">これは DIV 要素です。</div> <br><br> </body> </html>
scale() メソッド
これは DIV 要素です。
これは DIV 要素です。
<!DOCTYPE html> <html> <head> <style> div.scale{ width:100px; height:75px; background-color:#3399FF; border:1px solid #0066FF; color:#FFFFFF; } #scale1{ margin:100px; -ms-transform:scale(2,4); /* IE 9 */ -webkit-transform:scale(2,4); /* Chrome, Safari, Opera */ transform:scale(2,4); /* Standard syntax */ } </style> </head> <body> <h3>scale() メソッド</h3> <div class="scale">これは DIV 要素です。</div> <div id="scale1" class="scale">これは DIV 要素です。</div> <br><br> </body> </html>
skew() メソッド
これは DIV 要素です。
これは DIV 要素です。
<!DOCTYPE html> <html> <head> <style> div.skew{ width:100px; height:75px; background-color:#3399FF; border:1px solid #0066FF; color:#FFFFFF; margin-left:20px; } #skew1{ -ms-transform:skew(30deg,20deg); /* IE 9 */ -webkit-transform:skew(30deg,20deg); /* Chrome, Safari, Opera */ transform:skew(30deg,20deg); /* Standard syntax */ } </style> </head> <body> <h3>skew() メソッド</h3> <div class="skew">これは DIV 要素です。</div> <div id="skew1" class="skew">これは DIV 要素です。</div> <br><br> </body> </html>
matrix() メソッド
これは DIV 要素です。
これは DIV 要素です。
<!DOCTYPE html> <html> <head> <style> div.matrix{ width:100px; height:75px; background-color:#3399FF; border:1px solid #0066FF; color:#FFFFFF; margin-left:20px; } #matrix1{ -ms-transform:matrix(30deg,20deg); /* IE 9 */ -webkit-transform:matrix(30deg,20deg); /* Chrome, Safari, Opera */ transform:matrix(30deg,20deg); /* Standard syntax */ } </style> </head> <body> <h3>matrix() メソッド</h3> <div class="matrix">これは DIV 要素です。</div> <div id="matrix1" class="matrix">これは DIV 要素です。</div> <br><br> </body> </html>