CSSで背景を回転させる方法

CSS 回転背景

CSS (Cascading Style Sheets) は、Web ページの外観とレイアウトを制御するために広く使用されているテクノロジです。 CSS を使用して、色、画像、位置などの背景を制御できます。ただし、CSS には、背景を回転して Web サイトに独自の外観を追加できるという優れた機能もあります。

背景を回転する基本的な考え方は、CSS3 のtransform属性を使用することです。この属性を使用すると、開発者は 2 次元または 3 次元での行列変換を指定して要素を変換できます。 rotate() 関数を使用すると、オブジェクトを回転できます。また、translate() 関数を使用して、オブジェクトの x 座標と y 座標を設定することもできます。

CSS を使用して背景を回転する方法を示す例をいくつか見てみましょう。

例 1: CSS を使用して単色の背景を回転する

まず、CSS を使用して単色の背景を回転する方法を見てみましょう。これは、次の CSS コードで実現できます。

div {
    height: 100vh;
    width: 100vw;
    background-color: #FF6633;
    position: relative;
    transform: rotate(30deg);
    transform-origin: center;
}

この例では、div 要素の高さと幅はビューポート サイズと同じです。背景色はオレンジ色に設定されています。位置はドキュメント フローに関連しており、transform 属性とrotate() 関数を使用すると、背景を 30 度回転して、ページ上で傾斜した効果を与えることができます。また、回転が中心点の周りで行われるように、transform-origin プロパティを設定します。

例 2: CSS を使用して画像の背景を回転する

同じ手法を使用して画像の背景を回転できます。 CSS を使用して背景画像を回転する方法を示す例を次に示します。

div {
    height: 100vh;
    width: 100vw;
    background-image: url("background.jpg");
    background-size: cover;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background-image: inherit;
    transform: rotate(30deg);
    z-index: -1;
}

この例では、背景画像を持つ div 要素を使用します。背景画像が切り詰められずに回転するように背景画像を適応させるために、プロパティbackground-size:coverを設定します。また、overflow: hidden 属性を使用して背景画像を非表示にします。

次に、:before 疑似要素を使用して同じサイズの背景画像を作成し、それを 30 度回転し、z-index 属性を使用して背景の下に配置します。 「top: -50%」および「left: -50%」プロパティを設定すると、その位置は親 div 要素の中心点を基準にします。

例 3: CSS を使用してテキストの背景を回転する

CSS を使用して、背景としてテキストを回転することもできます。 CSS を使用してテキストの背景を回転する方法を示す例を次に示します。

div {
    height: 100vh;
    width: 100vw;
    font-size: 80px;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background: #FF6633;
    transform: rotate(30deg);
    z-index: -1;
}

h1 {
    color: #FFFFFF;
    transform: rotate(-30deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

この例では、テキストを含む div 要素を使用し、それを同じ位置とサイズの :before 擬似要素に配置します。 。 transform:rotate(30deg) 属性を使用して :before 疑似要素を 30 度回転し、その色をオレンジに設定します。

次に、transform:rotate(-30deg) 属性を使用してテキストを 30 度回転し、位置:絶対、上:50%、左:50% を設定して親と位置合わせします。 div 要素。最後に、translate(-50%, -50%) 属性を使用して中央に配置します。

概要

CSS の回転背景は、Web サイトをより興味深く魅力的に見せるために使用できる素晴らしい効果です。この記事では、単色の背景、画像の背景、テキストの背景の例を使用して、CSS を使用して背景を回転する方法を示しました。デモで使用したtransform:rotate()プロパティは、角度を指定して背景を回転させるのに非常に便利です。

以上がCSSで背景を回転させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。