labjsでCSSをテクストを反転させる際のコード

作成日: 2025/12/9

学生からの相談で調べた際のメモ。

labjsでCSSを適用して鏡文字を作成したい。CSSを使いたいのでHTMLのScreenで画面を作る。

心的回転的なものを想定して，パラメータは刺激の語のtext，回転角度のdegree, 反転させるかどうかのmirroredがあることを想定した。Scriptの実行タイミングをrunにしておかないとうまく動かない。

code:JavaScript

// 枠を取得

let container = document.querySelector("div.container");

// 刺激のdivを作成

let stimulus = document.createElement('div');

stimulus.id = 'stimulus'; // CSSを刺激だけに適用するときに便利なので設定

stimulus.innerHTML = this.parameters.text; // 刺激の単語

let transform = 'rotate(' + this.parameters.degree + 'deg)';　　//　回転

if (this.parameters.mirrored == "mirrored") {

transform = transform + ' ' + 'scaleX(-1)'; // 鏡像の場合には反転

}

stimulus.style.transform = transform; // 刺激にスタイルを設定

// 刺激を枠の子要素先頭に追加

container.prepend(stimulus);

HTML Screenで刺激を中央に表示したい場合には以下のようなCSSを設定しておくと良い。

code:CSS

.container #stimulus {

/* 中央寄せのための設定 */

text-align: center;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

font-size: 60px;

}