検索
ホームページウェブフロントエンドCSSチュートリアルCSS3 は 2D 変換をどのように実装しますか? 2D変換の実装(コード例)

この記事の内容は、CSS3で2D変換を実装する方法を紹介するものです。 2D 変換の実装 (コード例)。困っている友人は参考にしていただければ幸いです。

transform

リファレンス W3 マニュアル

transform 属性は、2D または 3D から要素に変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。

  • 1. 形式:

transform: none|transform-functions;
  • 1. 共通の値:

    • 1)、回転##回転

      transform: rotate(45deg);/*其中deg是单位, 代表多少度*/
    ##2)、翻訳
      #翻訳
    • ##

      transform: translate(100px, 0px);  /*第一个参数:水平方向第二个参数:垂直方向*/
      #3)、ズーム

    • #スケール
    • transform: scale(1.5);
      /*transform: scale(0.5, 0.5);*/
      
      /*
      第一个参数:水平方向
      第二个参数:垂直方向
      注意点:
      如果取值是1, 代表不变
      如果取值大于1, 代表需要放大
      如果取值小于1, 代表需要缩小
      如果水平和垂直缩放都一样, 那么可以简写为一个参数
      */
      4)、連続形式への包括的な変換

    transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
    /*
    注意点:
    1.如果需要进行多个转换, 那么用空格隔开
    2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
    */
    • デフォルトでは、すべての要素が Z 軸を中心に回転します。軸を中心に回転したい場合は、回転後に軸を追加するだけです。例:

      transform: rotateZ(45deg);
      
      transform: rotateX(45deg);
      
      transform: rotateY(45deg);
    transform-origin

transform-origin 属性は、変換された要素の位置を変更するために使用されます2D 変換 要素は、要素の X 軸と Y 軸を変更できます。 3D 変換要素は、Z 軸を変更することもできます。

1 形式:

transform-origin: left top;
  • 2。

  • ##
    /*具体像素*/
    transform-origin: 200px 0px;
    /*百分比*/
    transform-origin: 50% 50%;
    /*特殊关键字*/
    transform-origin: left top;
デフォルトでは、すべての要素は独自の中心点を参照として使用して回転します。中心点属性を変形することで参照点を変更できます。
  • perspective

perspective 属性は、ビューから 3D 要素までの距離をピクセル単位で定義します。この属性を使用すると、3D 要素のビューを変更して 3D 要素を表示できます。 # 要素に対してパースペクティブ属性が定義されている場合、要素自体ではなく、その子要素がパースペクティブ効果を取得します

形式:

perspective: number|none;
/*
number  元素距离视图的距离,以像素计
none    默认值。与0相同。不设置透视
*/

注: パースペクティブ属性は 3D 変換要素にのみ影響します
包括的な例 1
  • 2D モジュール変換ポーカーの実践

nbsp;html>
    <meta>
    <title>2D模块转换扑克练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 310px;
            height: 418px;
            border: 1px solid gold;
            margin: 100px auto;
            background-color: #afcced;
            perspective: 400px;
        }
        p img{
            transition: transform 1.2s;
            transform-origin: center bottom;
        }
        p:hover img{
            transform: rotateX(80deg);
        }
    </style><p>
    <img  src="/static/imghwm/default1.png" data-src="img/pk.png" class="lazy" alt="CSS3 は 2D 変換をどのように実装しますか? 2D変換の実装(コード例)" ></p>

総合的な例 2 (フォト ウォール)

2D 変換モジュール-フォト ウォール

nbsp;html>
    <meta>
    <title>2D转换模块-照片墙</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            height: 400px;
            margin: 100px auto;
            background-color: cornflowerblue;
            text-align: center;
            border: 1px solid #000;
        }
        ul li{
            list-style: none;
            margin-top: 100px;
            height: 200px;
            width: 150px;
            display: inline-block;
            background-color: red;
            border: 5px solid white;
            transition: transform 1s;
            box-shadow: 2px 2px 2px;
            position: relative;
        }
        ul li:nth-child(1){
            transform: rotate(30deg);
        }
        ul li:nth-child(2){
            transform: rotate(-40deg);
        }
        ul li:nth-child(3){
            transform: rotate(15deg);
        }
        ul li:nth-child(4){
            transform: rotate(60deg);
        }
        ul li:nth-child(5){
            transform: rotate(-25deg);
        }
        ul li:nth-child(6){
            transform: rotate(10deg);
        }
        ul li img{
            width: 150px;
            height: 200px;
        }
        ul li:hover {
            transform: scale(1.6);
            z-index: 999;
        }
    </style>
        
  • CSS3 は 2D 変換をどのように実装しますか? 2D変換の実装(コード例)
  •     
  • CSS3 は 2D 変換をどのように実装しますか? 2D変換の実装(コード例)
  •     
  • CSS3 は 2D 変換をどのように実装しますか? 2D変換の実装(コード例)
  •     
  • CSS3 は 2D 変換をどのように実装しますか? 2D変換の実装(コード例)
  •     
  • CSS3 は 2D 変換をどのように実装しますか? 2D変換の実装(コード例)
  •     
  • CSS3 は 2D 変換をどのように実装しますか? 2D変換の実装(コード例)

以上がCSS3 は 2D 変換をどのように実装しますか? 2D変換の実装(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
非常に多くの色のリンク非常に多くの色のリンクApr 13, 2025 am 11:36 AM

最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。

FlexBoxでの自動マージンの仕組みFlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AM

ロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました

動く虹色の下線動く虹色の下線Apr 13, 2025 am 11:27 AM

サンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません

新年、新しい仕事?グリッド駆動の履歴書を作成しましょう!新年、新しい仕事?グリッド駆動の履歴書を作成しましょう!Apr 13, 2025 am 11:26 AM

多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう

リロードしすぎるという習慣からユーザーを分解する1つの方法リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AM

ページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています

Reactを使用したドメイン駆動型のデザインReactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AM

Reactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。 (「正しいと感じる」までファイルを移動するだけです笑)。真実

非アクティブユーザーの検出非アクティブユーザーの検出Apr 13, 2025 am 11:08 AM

ほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら

Wufoo ZapierWufoo ZapierApr 13, 2025 am 11:02 AM

Wufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター