CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS translate（）関数

CSSのtranslate（）関数は、要素を水平方向と垂直方向に再配置するために使用されます。

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
.translate_img {
   transform: translate(50px, 0);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p id="demo1">Excel vlookup</p>
<p id="demo2">Excel filters</p>
<h4>Learn Excel</h4>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/42/images/course_42_image.png"
alt="MS Excel">
</body>
</html>

出力

CSS translate（）関数

例

別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
   transform: translate(100px, 50%);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
</body>
</html>

出力

CSS translate（）関数


  1. CSSを使用した背景色の設定

    CSSを使用して背景色を設定するには、background-colorプロパティを使用します。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> .demo {    text-decoration: overline underline;    background-color: red; } </style> </head> <body> <h1>Details</h1> <p cla

  2. HTMLとCSSの初心者向けガイド

    今日、私たちのサイトを支えているさまざまなテクノロジーを見つけることができますが、インターネット全体で最も重要な2つのファイルはHTMLとCSSです。はい、複雑なものが必要な場合は、それに対応するためのテクノロジーもさらに必要になります。ただし、単純な個人用Webページを作成するだけの場合は、HTMLとCSSだけで十分です。 基本の紹介 これは、HTMLとCSSの初心者向けガイドであり、簡単なサイトをできるだけ早く作成する方法を示しています。結果は必ずしも「標準に準拠」しているとは限りません。さらに微調整して拡張したい場合は、自分で読む必要があります。ただし、これはサイトであり、ほとんどのブ