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

CSSのmatrix（）関数

CSSのmatrix（）関数は、同種の2D変換行列を定義するために使用されます。線形変換をパラメータとして設定します。

例

例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   transform: matrix(2, 1, -1, 1, 190, 100);
}
.skew_img {
   transform-origin: top right;
   transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

出力

CSSのmatrix（）関数

例

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

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   transform: matrix(0.9, 0.8, -0.8, 0.8, 100, -30);
}
.skew_img {
   transform-origin: left;
   transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

出力

CSSのmatrix（）関数


  1. CSSの：last-child疑似クラス

    CSS：last-child疑似クラスは、他の要素の最後の子要素である要素を選択します。 構文 以下は構文です- :last-child{    /*declarations*/ } CSSの最後の子の疑似クラスの例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> table {    margin: auto;    padding: 10px;    border: hsl(54, 100%, 50%) sol

  2. CSSの@importAt-rules

    CSS @importルールは、インポートされたスタイルシートのURLの後にメディアタイプを指定することにより、特定のターゲットメディアのスタイル情報を設定するために使用されます。 構文 以下は構文です- @import url（ /*ファイルパス*/）mediatypes {CSS-Code;} CSSの@importルールの例を見てみましょう： HTMLドキュメント 例 @import url（screen.css）screen; @import url（print.css）print; Vivamus commodo、dolor eu porttitor sag