検索
ホームページウェブフロントエンド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 までご連絡ください。
@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか?@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか?Apr 18, 2025 am 11:34 AM

先日、この質問がありました。私の最初の考えは、奇妙な質問です!特異性はセレクターに関するものであり、アットレールはセレクターではないので、...無関係ですか?

@mediaと@supportのクエリをネストできますか?@mediaと@supportのクエリをネストできますか?Apr 18, 2025 am 11:32 AM

はい、あなたはできます、そしてそれは本当にどの順序で重要ではありません。 CSSプリプロセッサは必要ありません。通常のCSSで動作します。

クイックガルプキャッシュバストクイックガルプキャッシュバストApr 18, 2025 am 11:23 AM

CSSやJavaScript(および画像とフォントなど)などのアセットにファーアウトキャッシュヘッダーを確実に設定する必要があります。それはブラウザを伝えます

CSSの品質と複雑さを監視するスタックを探してCSSの品質と複雑さを監視するスタックを探してApr 18, 2025 am 11:22 AM

多くの開発者は、CSSコードベースを維持する方法について書いていますが、そのコードベースの品質をどのように測定するかについて多くの人が書いていません。確かに、私たちは持っています

データリストは、値を強制せずに値を提案するためのものですデータリストは、値を強制せずに値を提案するためのものですApr 18, 2025 am 11:08 AM

短い任意のテキストを受け入れるために必要なフォームを持っていたことがありますか?名前などのように。それはまさにそのためのものです。たくさんあります

チューリッヒでのフロント会議チューリッヒでのフロント会議Apr 18, 2025 am 11:03 AM

私は、フロント会議のためにスイスのチューリッヒに向かうことにとても興奮しています(その名前とURLが大好きです!)。私はこれまでスイスに行ったことがないので、興奮しています

CloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますCloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますApr 18, 2025 am 10:58 AM

ソフトウェア開発における私のお気に入りの開発の1つは、サーバーレスの出現です。詳細に行き詰まる傾向がある開発者として

NUXTアプリケーションで動的ルートを作成しますNUXTアプリケーションで動的ルートを作成しますApr 18, 2025 am 10:53 AM

この投稿では、私が構築して展開して展開してネットライフを使用して、着信データの動的ルートを作成する方法を示すeコマースストアのデモを使用します。それはかなりです

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ヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

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

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

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

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境