検索

1. 2D 変換

1. 変換オブジェクトの変換を設定または取得します

値:

none: 6 値 (a、b、c、d、e、f) の変換行列の形式で 2D 変換を指定します。これは、[a、b、c、d、e、f を直接適用するのと同等です。 ] 変換行列

translation([, ])。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメータが指定されていない場合、デフォルト値は 0 です。

TranslateX(): オブジェクトの X 軸 (水平方向) の平行移動を指定します

translateY(): オブジェクトのY軸(垂直方向)の平行移動を指定します

rotate(): オブジェクトの 2D 回転を指定します。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメーターが指定されていない場合は、最初のパラメーターの値がデフォルトで取得されます

scaleX(): オブジェクトの X 軸の (水平) スケーリングを指定します

scaleY(): オブジェクトの Y 軸の (垂直) スケーリングを指定します

skew( [, ]): オブジェクトのスキュー変換(斜めの歪み)を指定します。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメーターが指定されていない場合、デフォルト値は 0 です skewX(): オブジェクトの X 軸の (水平) 歪みを指定します

skewY(): オブジェクトの Y 軸の (垂直) 歪みを指定します

注: ブラウザーによっては、次の接頭辞が必要です。

カーネルの種類 書き方
ウェブキット(Chrome/Safari) -ウェブキット-変換
Gecko(Firefox) -moz-transform
プレスト(オペラ) お変身
トライデント(IE) -ms-transform
W3C 変身

例:

CSS コード:

リーリー

HTMLコード:

リーリー

2.transform-origin 特定の原点で変換するオブジェクトを設定または取得します。

値:

: 座標値をパーセントで指定します。マイナスになることもあります。

: 座標値を長さの値で指定します。マイナスになることもあります。

left: 原点の横座標を left に指定center①: 原点の横座標を

に指定

centerright: 原点の横座標を

として指定します

右上: 原点の座標を

として指定します

topcenter②: 原点の座標を

として指定します

centerbottom: 原点の垂直座標をbottomとして指定します

さまざまなブラウザでの書き方:

カーネルの種類 書き方
ウェブキット(Chrome/Safari) -webkit-transform-origin
Gecko(Firefox) -moz-transform-origin
プレスト(オペラ) -o-transform-origin
トライデント(IE) -ms-transform-origin
W3C 変換元

  

 

 

 

 

  例子:

  CSS代码:

<span style="font-size: 15px;"><span style="color: #800000;">        #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> mediumvioletred</span>;<span style="color: #ff0000;">
            -webkit-transform</span>:<span style="color: #0000ff;"> rotate(15deg)</span>;/*旋转15度*/<span style="color: #ff0000;">
            -webkit-transform-origin</span>:<span style="color: #0000ff;"> left top</span>; /*以左上角为原点旋转*/
        } </span>       

  HTML代码:

<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

  

   二、过渡样式

    1、transition-property  检索或设置对象中的参与过渡的属性。

    取值:

    all:所有可以进行过渡的css属性
   none:不指定过渡的css属性
 有过渡效果的属性:
  
        例子:
    CSS代码: 
<span style="font-size: 15px;"><span style="color: #800000;">         #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
            transition-property</span>:<span style="color: #0000ff;"> background-color</span>;
            
        }<span style="color: #800000;">
        #transform1:hover
        </span>{<span style="color: #ff0000;">
            transition-duration</span>:<span style="color: #0000ff;">.5s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> yellow</span>;
        }
                </span>
    HTML代码:
<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></span>请将鼠标放在上面<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>
请将鼠标放在上面
      2、transition-duration   检索或设置对象过渡的持续时间
     transition-duration:time
     例子可参见上个例子。
    3、transition-timing-function  检索或设置对象中过渡的动画类型。
   取值:
   linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
          ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
          ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
          ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
          ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)cubic-bezier(, , , ):特定的贝塞尔曲线类型,4个数值需           在[0, 1]区间内。
   例子可参见上个例子。
 
   4、transition-delay   设置对象延迟过渡的时间。
 
   CSS代码:
<span style="font-size: 15px;"><span style="color: #800000;">        #delay1
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> antiquewhite</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;">100px</span>;                
        }<span style="color: #800000;">
        #delay1:hover
        </span>{<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> black</span>;
        }<span style="color: #800000;">
        #delay2
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> antiquewhite</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;">100px</span>;                
        }<span style="color: #800000;">
        #delay2:hover
        </span>{<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> blue</span>;
        }     </span>       
   HTML代码; 
<span style="font-size: 15px;"><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="delay1"</span><span style="color: #0000ff;">><span style="color: #000000;">延迟</span></span>1s后开始过渡<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="delay2"</span><span style="color: #0000ff;">></span>延迟4s后开始过渡<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>
延迟1s后开始过渡
延迟4s后开始过渡
 
      ***一般情况下可以将变形与过渡结合使用制作出一些特别的效果。
        例:
  CSS代码:
  
<span style="font-size: 15px;"><span style="color: #800000;">        #all
        </span>{<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> red</span>;            
        }<span style="color: #800000;">
        #all:hover
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> yellow</span>;<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
            transform</span>:<span style="color: #0000ff;"> scale(1.5,1.5)</span>;<span style="color: #ff0000;">
            transition-duration</span>:<span style="color: #0000ff;"> 1s</span>;
        }   </span>                     
  HTML代码:
<span style="font-size: 15px;"><span style="color: #0000ff;">  <span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="all"</span><span style="color: #0000ff;">></span>请把鼠标放在上面查看效果<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>
请把鼠标放在上面查看效果
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

WebページのPNG画像にストローク効果を効率的に追加する方法は?WebページのPNG画像にストローク効果を効率的に追加する方法は?Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

&lt; datalist&gt;の目的は何ですか 要素?&lt; datalist&gt;の目的は何ですか 要素?Mar 21, 2025 pm 12:33 PM

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

&lt; meter&gt;の目的は何ですか 要素?&lt; meter&gt;の目的は何ですか 要素?Mar 21, 2025 pm 12:35 PM

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?HTML5&lt; time&gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?Mar 12, 2025 pm 04:05 PM

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

&lt; Progress&gt;の目的は何ですか 要素?&lt; Progress&gt;の目的は何ですか 要素?Mar 21, 2025 pm 12:34 PM

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

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

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 中国語版

SublimeText3 中国語版

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

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)