NEW ARTICLE
RHELでのRuby on Railsアプリケーションのデプロイ手順
  1. HOME
  2. javascript
  3. javascript transformを設定して画像を回転させる

javascript transformを設定して画像を回転させる

javascript transformを設定して画像を回転させる

javascriptで、CSS3のtransformを設定して画像を回転させるサンプルコードを記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 102.0.5005.63
Javascript サンプル集はこちら

style.transform使い方

transform関数を指定して、使用します。

style.transform使い方

elm.style.transform = transform関数を使用

transform関数例

// 回転  rotate()
document.getElementById("id名").style.transform = "rotate(" + 角度 + "deg)";

// 移動  translate()
document.getElementById("id名").style.transform = "translate(x, y)";

// 拡大・縮小 scale()
document.getElementById("id名").style.transform = "scale(x, y)";

サンプルコード

以下は、ボタンをクリックすると時計回りに画像が90度、-90度回転するサンプルコードとなります。

※cssには「uikit」を使用してます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- UIkit CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" />

  <!-- UIkit JS -->
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js"></script>
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
  }
</style>
<script>
  
  let angle = 0;

  function foo(x){    
    let hoge = document.getElementById("hoge");
    angle = angle + x;
    hoge.style.transform = "rotate(" + angle + "deg)"; //deg 時計回りで正の方向
  };

</script>

<body>
  <div class="main">
    <div class="uk-dark uk-background-muted uk-padding">

      <img id="hoge" data-src="https://mebee.info/wp-content/uploads/2019/10/wp-2.png" width="200" height="100" alt="" uk-img>

      <p uk-margin>
        <button class="uk-button uk-button-danger" onclick="foo(90)">時計回りに90度</button>
        <button class="uk-button uk-button-danger" onclick="foo(-90)">時計回りに-90度</button>
      </p>
    </div>
  </div>
</body>

</html>

画像が回転できていることが確認できます。

また、javascript部は、document.getElementByIdを省略して、関数をアロー関数で記述することもできます。

アロー関数の使い方
let angle = 0;

const foo = (x) => {    

  angle = angle + x;
  hoge.style.transform = "rotate(" + angle + "deg)"; //deg 時計回りで正の方向

};