Преобразяване в стил - CSS-трикове

В transform-styleимота, когато се прилага за даден елемент, определя дали децата си, че елементите са разположени в 3D пространство, или сплескан.

.parent ( transform-style: preserve-3d; )

Той приема една от двете стойности: flat(по подразбиране) и preserve-3d. За да демонстрирате разликата между двете стойности, щракнете върху бутона за превключване в CodePen по-долу:

Вижте тази писалка!

Когато кликнете върху бутона, демонстрацията използва JavaScript за превключване на transform-styleстойността между preserve-3dи flat.

Както можете да видите, когато стойността е променена на flat, дъщерните елементи вече не се подреждат според translateZстойностите (в триизмерно пространство), а вместо това се изравняват, за да се появят по подразбиране на елементите на HTML страница.