CSS3変換します

1.基本的な構文は次のとおりです。

transform：none|transform-functions;

プロパティ説明しました：

none：該当するデフォルト値のいずれも、無修飾ことを示す、要素およびブロック要素をインライン化しないように
transform-functions：設定変更機能には、1つ以上のリスト変形関数であってもよいです

2.2D変換

ここに画像を挿入説明

3.素子変形原点

変形要素は、回転や変形の点を中心原点要素を有する、デフォルトの開始位置は、素子の中心位置です。
変換-origin属性を使用してCSSの変更は、変形の起源に基づいて要素を指定し、特定の構文は次のようにされています。

 transform-origin：x-axis y-axis z-axis;
 /*transform-origin最多接受三个值，分别是X轴，Y轴，Z轴的偏移量*/

ここに画像を挿入説明

4.3D変換

3D変形要素は、そのX軸、Y軸、Z軸を中心に回転させることをいいます。
ここに画像を挿入説明

5.ケース

2Dの場合：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3 2D转换</title>
    <style>
        .demo{
           margin: 25px;
            padding: 0;
            width: 150px;
            height: 50px;
            background-color:  #2bab79;
            font-weight: bold;
            font-size: larger;
            float: left;
        }
        .trans1{
            transform:rotate(30deg);
        }
        .trans2{
            transform:skew(30deg);
        }
        .trans3{
            transform:scale(0.8);
        }
        .trans4{
            transform:translate(5px,50px);
        }
    </style>
</head>
<body>
<div class="demo">不设置变形</div>
<div class="demo trans1">rotate(30deg)</div>
<div class="demo trans2">skew(30deg)</div>
<div class="demo trans3">scale(0.8)</div>
<div class="demo trans4">translate(5,50px)</div>
</body>
</html>

ディスプレイ

ここに画像を挿入説明

3Dケース

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 3D转换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        .box {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 24px;
            margin: 100px auto;
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(30deg);
        }
        .front, .back, .left, .right, .top , .bottom {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.5;
        }
        .front {
            background-color: pink;
            transform: translateZ(100px);
        }
        .left {
            background-color: green;
            transform: rotateY(90deg) translateZ(-100px);
        }
        .right {
            background-color: red;
            transform: rotateY(-90deg) translateZ(-100px);
        }
        .top {
            background-color: blue;
            transform: rotateX(90deg) translateZ(100px);
        }
        .bottom {
            background-color: yellow;
            transform: rotateX(-90deg) translateZ(100px);
        }
        .back {
            background-color: purple;
            transform: translateZ(-100px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="front">front</div>
    <div class="back">back</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</div>
</body>
</html>