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

CSS3 scale3d（）関数

scale3d（）関数は、3D空間で要素をスケーリングするために使用されます。要素は、パラメータとして設定された数値に基づいてスケーリングされます。

例

<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
   transform: scale3d(0.5, 1, 1.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>

出力

CSS3 scale3d（）関数

例

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

<!DOCTYPE html>
<html>
<head>
<style>
.scale3d_img {
   transform: scale3d(-1.4, 0.4, 0.7);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="scale3d_img" src=
"https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg"
alt="Apache Spark">
</body>
</html>

出力

CSS3 scale3d（）関数


  1. 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); } </

  2. 要素の幅をHTMLで設定します

    幅を使用 要素の幅を設定するHTMLの属性。この属性は、、、、、などの要素で使用できます。 例 次のコードを実行して、幅を実装してみてください。 HTMLの属性- <!DOCTYPE HTML> <html>    <body>       <video width="300" height="200" controls autoplay>          <source src = "/