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 までご連絡ください。