変形 - transform（変形）

CSS3

transform（変形）

  • transformプロパティは、二次元座標での変形を行うプロパティです
  • 値に translate( ) / scale( ) / rotate( ) / skew( ) の４種類のトランスフォーム関数を取り、それぞれ移動・拡大縮小・回転・傾斜させることができます


f:id:web-css-design:20161228235045p:plain

移動の書式
  • translate( ) 関数は、要素を X軸方向・Y軸方向に移動させることができます
  • X軸方向の値をプラスにすると右、マイナスで左へ移動
  • Y軸方向の値をプラスにすると下、マイナスで上へ移動

f:id:web-css-design:20161229011433p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>translate() Transform［変形］</title>
<style>
.box {
  width: 150px;
  height: 150px;
  margin: 50px;
  background: #BDDFAB;
  text-align: center;
  line-height: 150px;
}
.trans01{
  -webkit-transform: translate(600px,0);
  -ms-transform: translate(600px,0);
  transform: translate(600px,0);
  transition: 2s;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content">
<div class="box">右へ600px移動</div>
</div>
<script>
$(function(){
  $( this ).on( 'click', function(){
    $( '.box' ).addClass( 'trans01' );
  });
});
</script>
</body>
</html>
拡大・縮小
  • scale( ) 関数は、要素を X軸方向・Y軸方向に拡大縮小させることができます
  • 変形の原点は、オブジェクトの中心になります

f:id:web-css-design:20161229022737p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>scale() Transform［変形］</title>
<style>
.box {
  width: 150px;
  height: 150px;
  margin: 300px auto;
  background: #BDDFAB;
  text-align: center;
  line-height: 150px;
}
.scale01{
  -webkit-transform: scale(2.0, 2.0);
  -ms-transform: scale(2.0, 2.0);
  transform: scale(2.0, 2.0);
  transition: 2s;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content">
<div class="box">200%に拡大</div>
</div>
<script>
$(function(){
  $( this ).on( 'click', function(){
    $( '.box' ).addClass( 'scale01' );
  });
});
</script>
</body>
</html>
回転
  • rotate( ) 関数は、角度を指定して要素を回転させることができます
  • プラスの角度指定で時計回り、マイナスの角度指定で反時計回りに回転します
  • 変形の原点は、オブジェクトの中心になります

f:id:web-css-design:20161229024235p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>rotate() Transform［変形］</title>
<style>
.box {
  width: 150px;
  height: 150px;
  margin: 300px auto;
  background: #BDDFAB;
  text-align: center;
  line-height: 150px;
}
.rotate01{
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: 2s;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content">
<div class="box">45度回転</div>
</div>
<script>
$(function(){
  $( this ).on( 'click', function(){
    $( '.box' ).addClass( 'rotate01' );
  });
});
</script>
</body>
</html>
傾斜

f:id:web-css-design:20161229030229p:plain


f:id:web-css-design:20161229142007p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>skew() Transform［変形］</title>
<style>
.box {
  width: 150px;
  height: 150px;
  margin: 300px auto;
  background: #BDDFAB;
  text-align: center;
  line-height: 150px;
}
.skew01{
  -webkit-transform: skew(30deg,0);
  -ms-transform: skew(30deg,0);
  transform: skew(30deg,0);
  transition: 2s;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content">
<div class="box">X軸方向に30度傾斜</div>
</div>
<script>
$(function(){
  $( this ).on( 'click', function(){
    $( '.box' ).addClass( 'skew01' );
  });
});
</script>
</body>
</html>
  • skew(30deg,0)とX軸方向のみにプラスの角度を指定するとY軸が反時計回りに回転するため、その軸にそって左に倒れた平行四辺形になります