CSSでディスプレイスメントtranslate()を使用するにはどうすればよいですか?翻訳の使用法の概要-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSでディスプレイスメントtranslate()を使用するにはどうすればよいですか?翻訳の使用法の概要

云罗郡主

Oct 29, 2018 pm 01:44 PM

CSS3 で翻訳を使用するにはどうすればよいですか? CSSでディスプレイスメントtranslate()を使用するにはどうすればよいですか?これらは、CSS を学習する一部の初心者が遭遇する問題かもしれません。次に、CSS で replace() を使用する方法を説明しましょう。

1: Translate() の使用法

CSS スタイルでは、translate() を使用して変位を表すことがよくあります。translate() で x と y を使用して、水平方向の位置を表すことができます。要素を垂直または水平に移動します。

例: 1.translateY(y): 要素が垂直方向に移動することを示します。これを y 軸と呼びます。

2.translateX(x): は次のことを示します。要素は水平方向に移動します。x 軸と呼ばれる方向に移動します。

2:translate() syntax

transform:translateX(x);或者transform:translateY(y);

css3 では、transform 属性の変換メソッドは、transform に属します。、そして、transform を追加する必要があります。つまり、要素が水平方向に移動する距離の単位は px とパーセントで表され、x が正の値に見える場合、要素がに移動したことを意味します。 x が負の値の場合、要素は左に移動します。

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3位移translate()方法</title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            margin:100px auto;/*水平居中*/
            width:200px;
            height:100px;
            border:1px dashed silver;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:translateX(50px);
            -webkit-transform:translateX(20px);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:translateX(20px);     /*兼容-moz-引擎浏览器*/
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

効果は次のとおりです。

CSSでディスプレイスメントtranslate()を使用するにはどうすればよいですか?翻訳の使用法の概要

#まとめ：transform:translateX(50px)は、水平方向に50px移動することを示します。このとき、50pxを-50pxに変更すると、要素は逆方向に50px移動します。水平方向に。

translate(y) の使用法:

translate(y) の使用法は、translate(x) の使用法とよく似ており、x は水平方向に移動し、y は垂直方向に移動します。

y が正の値の場合は、要素が下方向に移動していることを意味し、負の値が表示される場合は上方向に移動していることを意味します。これは通常の考え方とは異なります。

translate(x,y) の混合使用:

は、要素が x 内で水平方向に移動することを示します。ここで、y の値はパラメーターであることに注意してください。 value が設定されていない場合、要素が x 軸上で移動することを示している可能性があります。実際、translate() を CSS と組み合わせて使用することはあまり意味がありません。

上記はCSSでdisplacement translation()を使用する方法です。翻訳の使用方法の概要についての完全な紹介

CSS ビデオチュートリアルについて詳しく知りたい場合は、php 中国語 Web サイトに注目してください。

以上がCSSでディスプレイスメントtranslate()を使用するにはどうすればよいですか?翻訳の使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo