2D- und 3D-Änderungen in CSS3

2D-Transformation

Transformationsattribut

• Grammatik:transform：none | <transform-function>
• Funktionsliste:translate()，rotate()，scale()，skew()，matrix()
• Standardwert: keiner
• Gilt für: alle Elemente auf Blockebene und einige Inline-Elemente;
• Vererbung: keine;
• Attributwertanalyse:
  • translator(x,y): Definieren Sie eine 2D-Transformation, die Elemente entlang der X- und Y-Achse verschiebt.
  • translatorX(n): Definieren Sie eine 2D-Transformation, um Elemente entlang der X-Achse zu verschieben.
  • translatorY(n): Definieren Sie eine 2D-Transformation, um Elemente entlang der Y-Achse zu verschieben.
  • rotieren (Winkel): Definieren Sie die 2D-Rotation und geben Sie den Winkel in den Parametern an.
  • scale(x,y): Definieren Sie eine 2D-Skalierungstransformation, die die Breite und Höhe des Elements ändert.
  • scaleX(n): Definiert eine 2D-Skalierungstransformation, die die Breite des Elements ändert.
  • scaleY(n): Definieren Sie eine 2D-Skalierungstransformation, um die Höhe des Elements zu ändern.
  • skew(x-angle,y-angle): Definiert eine 2D-Skew-Transformation entlang der X- und Y-Achse.
  • skewX(angle): Definiert eine 2D-Schrägtransformation entlang der X-Achse.
  • skewY(angle): Definiert eine 2D-Skew-Transformation entlang der Y-Achse.
  • Matrix(n,n,n,n,n,n): Definiert eine 2D-Transformation unter Verwendung einer Matrix aus sechs Werten. Die Matrixmethode verfügt über sechs Parameter, darunter Rotations-, Skalierungs-, Bewegungs- (Translations-) und Neigungsfunktionen.

transformieren Übersetzung: ändern

#box{
    
    
    transform: translate(200px,200px);
	transform: rotate(30deg);	正值顺时针选择，负值逆时针旋转
	transform-origin: 50% 50%;  所有的百分比都是参照图像的宽高，可以改变参照点，50%是中心点
    transform: scale(0.5,.5);	缩放，50%，默认根据中心点缩放，只有一个值时表示xy轴一样，等比缩放。
    transform: skew(30deg,30deg);	2D倾斜
    transform: matrix(n,n,n,n,n,,n)旋转，缩放，移动(平移)、倾斜
}

---

---

3D-Transformation

transform-style@3

Eigenschaftsbeschreibung: Legt fest oder ruft ab, wie verschachtelte Elemente im dreidimensionalen Raum gerendert werden

Grammatikvorlage:

transform-style: flat|preserve-3d

Standard: flat Mittel: Flach

Beschreibung des Immobilienwerts:

flat: 表示所有子元素在2D平面呈现;

preserve-3d: 表示所有子元素在3D空间中呈现;

Anwendbare Elemente: alle Elemente

Ist es vererbbar: Nein

Ist es animiert: Ja

Skriptschnittstelle: transformStyle

---

---

Perspektive

Eigenschaftsbeschreibung: Perspektivenabstand festlegen oder abrufen

Grammatikvorlage:

perspective: number|none

Standardwert: none

Beschreibung des Immobilienwerts:

number：元素距离视图的距离，以像素计;

none：默认值。与 0 相同。不设置透视;

Anwendbare Elemente: Elemente innerhalb der 3D-Ansicht

Ist es vererbbar: Nein

Ist es animiert: Ja

Skriptschnittstelle: perspective

---

---

Perspektive-Ursprung

Eigenschaftsbeschreibung: Legen Sie die untere Position des 3D-Elements fest oder rufen Sie sie ab

Grammatikvorlage:

perspective-origin: <x-axis> <y-axis>
<x-axis> = left center right length percentage
<y-axis> = top centerbottom length percentage

Standardwert: 50% 50%

Beschreibung des Immobilienwerts:

x-axis	定义该视图在 x 轴上的位置。默认值：50%;

y-axis：定义该视图在 y 轴上的位置。默认值：50%;

Anwendbare Elemente: Elemente mit dem Perspektivattribut

Ist es vererbbar: Nein

Ist es animiert: Ja

Skriptschnittstelle: perspective-origin

---

---

Rückseite-Sichtbarkeit@3

Eigenschaftsbeschreibung: Legt fest oder ruft ab, ob das Element sichtbar ist, wenn es nicht auf den Bildschirm blickt

Grammatikvorlage:

backface-visibility: visible|hidden

Standardwert: visible

Beschreibung des Immobilienwerts:

visible：背面是可见的;

hidden：背面是不可见的;

Anwendbare Elemente: 3D-Elemente

Ist es vererbbar: Nein

Ist es animiert: Ja

Skriptschnittstelle: backfaceVisibility

---

---

translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转

Beschreibt ausführlich 3ddie Voraussetzungen zum Erstellen von Animationen.

Auf der Außenseite muss eine zweilagige Umhüllung erfolgen, sonst kann 3Dder Effekt nicht erzielt werden

Die äußerste Ebene muss einen perspektivischen Abstandsraum habenperspective:1400px;

Alle übergeordneten Elemente, die für die 3D-Animation entworfen werden sollen, müssen hinzugefügt werdentransform-style: preserve-3d;

<style>
    #container{
      
      
        perspective:1400px;	  模拟3D效果离眼睛的距离，1200-1600的距离最好
    }
</style>
<body>
     容器 第一层容器，用于添加透视距离，没有容器就没有3D空间
    <div id="container">
        <div id="wrap">    包裹 第二层是辅助层
             第三层是内容盒子
            <div class="face">1</div>
            <div class="face">2</div>
        </div>
    </div>
</body>

transform: matrix3d(x,y,z,deg) scale3d(x,y,z);

(x, y, z) ist mit dem Ursprung verbunden. Diese Linie ist die Referenzachse, wenn das Element gedreht wird.