CSS transform-style
La proprietà CSS3 transform-style definisce il comportamento 3D degli elementi figli
La proprietà transform-style in CSS3 specifica se gli elementi figli di un contenitore trasformato in 3D devono mantenere il proprio contesto tridimensionale (preserve-3d) o essere appiattiti su un piano bidimensionale (flat). È essenziale per creare effetti 3D reali e profondità tra elementi annidati.
Sintassi
Significato dei valori principali:
-
flat: (Predefinito) Tutti gli elementi figli sono rappresentati nello stesso piano 2D, ignorando le trasformazioni 3D applicate ai figli.
-
preserve-3d: Gli elementi figli mantengono il proprio contesto 3D, consentendo una vera disposizione tridimensionale.
Esempio proprietà: transform-style
Codice Esempio: transform-style
.scene {
width: 300px;
height: 200px;
perspective: 800px;
margin-bottom: 40px;
}.flat-example,.preserve-example {
width: 100%;
height: 100%;
transform: rotateY(30deg);
background-color: #98c379;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 18px;
border-radius: 8px;
position: relative;
}.flat-example {
transform-style: flat;
}.preserve-example {
transform-style: preserve-3d;
}.child {
position: absolute;
width: 80px;
height: 80px;
background-color: #e06c75;
transform: translateZ(50px);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
border-radius: 6px;
}
Contenuto Esempio: transform-style
Esempio di utilizzo di transform-style
In questo esempio viene mostrato come il valore preserve-3d consenta agli elementi figli di mantenere la loro profondità 3D, mentre con flat l'effetto 3D viene appiattito.
flat
preserve-3d
CSS e HTML per l'elemento con transform-style applicato:
<style>
.scene {
width: 300px;
height: 200px;
perspective: 800px;
margin-bottom: 40px;
border: 1px dashed #ccc;
}
.flat-example,
.preserve-example {
width: 100%;
height: 100%;
background-color: #98c379;
color: white;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-radius: 8px;
transform: rotateY(30deg);
}
.flat-example {
transform-style: flat;
}
.preserve-example {
transform-style: preserve-3d;
}
.child {
position: absolute;
width: 80px;
height: 80px;
background-color: #e06c75;
transform: translateZ(50px);
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
border-radius: 6px;
}
</style>
<div class="scene">
<div class="flat-example">
flat
<div class="child">figlio</div>
</div>
</div>
<div class="scene">
<div class="preserve-example">
preserve-3d
<div class="child">figlio</div>
</div>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
