Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Transform style y perspective

8/20
Recursos

Aportes 20

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

La propiedad perspective es básicamente desde dónde estás viendo el objeto, la perspectiva puede cambiar dependendiendo de qué tan lejos o cerca esté.
.
Esta propiedad es importante cuando queremos manejar el 3D en las animaciones 😄

En esta imagen también podemos ver un ejemplo mucho más claro de lo que es la perspectiva 😄

Yo de artista a la 1:00am 😂

.
.

.
Código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            position: relative;
            width: 100px;
            height: 100px;
            /* border: 5px solid rgb(0, 0, 0); */
            perspective: 100px;
            width: 100px;
            margin-left: auto;
            margin-right: auto;
        }

        .item{
            position: absolute;
            width: 30px;
            height: 40px;
            left: 32px;
            top: 300px;
            background: rgb(255, 255, 255);
            opacity: 0.5;
            border: 3px solid rgb(0, 0, 0);
            z-index: 2;
            transform-style: preserve-3d;
            transform: rotateX(40deg);
        }
        
        .item2{
            position: absolute;
            width: 30px;
            height: 40px;
            left: 32px;
            top: 500px;
            background: rgb(255, 255, 255);
            opacity: 0.5;
            border: 3px solid rgb(0, 0, 0);
            z-index: 2;
            transform-style: preserve-3d;
            transform: rotateX(40deg);
        }

        .carretera{
            position: absolute;
            width: 100px;
            height: 200px;
            top: 10px;
            background: rgb(0, 0, 0);
            opacity: 0.5;
            border: 3px solid rgb(0, 0, 0);
            transform-style: preserve-3d;
            transform: rotateX(80deg);
        }

        .item4{
            position: absolute;
            width: 20px;
            height: 40px;
            left: 40px;
            top: 150px;
            background: rgb(255, 255, 255);
            opacity: 0.5;
            border: 3px solid rgb(0, 0, 0);
            z-index: 2;
            transform-style: preserve-3d;
            transform: rotateX(40deg);
        }
        .item4{
            position: absolute;
            width: 20px;
            height: 40px;
            left: 40px;
            top: 150px;
            background: rgb(255, 255, 255);
            opacity: 0.5;
            border: 3px solid rgb(0, 0, 0);
            z-index: 2;
            transform-style: preserve-3d;
            transform: rotateX(40deg);
        }

        .item5{
            position: absolute;
            width: 12px;
            height: 24px;
            left: 44px;
            top: 85px;
            background: rgb(255, 255, 255);
            opacity: 0.5;
            border: 3px solid rgb(0, 0, 0);
            z-index: 2;
            transform-style: preserve-3d;
            transform: rotateX(40deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">

        </div>
        <div class="item2">

        </div>
        <div class="carretera">

        </div>
        <div class="item4">

        </div>
        <div class="item5">

        </div>
    </div>
</body>
</html>

¡Para recordar!

se trabaja con position relative y absolute
siempre el relative va a ser el padre
y el hijo absolute
para que el absolute se adiera al elemento contenedor
esto en un caso general

Pasa a la puerta de cssland
.

Transformaciones CSS

Las propiedades principales para realizar transformaciones son las siguientes:
transform
Aplica una o varias funciones de transformación sobre un elemento.
transform-origin
Cambia el punto de origen del elemento en una transformación.
transform-style
flat | preserve-3d Modifica el tratamiento de los elementos hijos.
Funciones 2D

Funciones 3D
Recordar siempre que el eje X es el eje horizontal, el eje Y es el eje vertical y el eje Z es el eje de profundidad.

Me parece que la propiedad transform-style debería ir en el contenedor. De acuerdo a la documentación de MDN, transform-style establece si un elemento hijo está posicionado en el espacio (3D) o en el plano (2D).

Tomé el código de la clase, le modifiqué un poco los colores y el tamaño para que se vea más el efecto. Este es el resultado con preserve-3d en la clase container.

.container {
      position: relative;
      width: 500px;
      height: 500px;
      border: 5px solid hotpink;
      perspective: 1000px;
      background: hotpink;
      transform-style: preserve-3d;
    }

.item {
      position: absolute;
      width: 500px;
      height: 500px;
      background: green;
      opacity: 0.5;
      /* transform-style: preserve-3d; */
      transform: rotateX(40deg);
    }

Como se puede ver, al estar en el espacio, el plano del contenedor cubre al plano inclinado del item.

Notas de la clase

Usando lo de esta clase… no sé si quedó perfecta la perspectiva, pero fue para probar mas que nada…

Código: (Pug/Scss)

doctype html
html(lang="es")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Platzi
        link(rel="stylesheet", href="style.css")
        
    body
        .container
            h1 Menú
            .item Item 1
            .item Item 2
            .item Item 3
            .item Item 4
            img.img(src="../placeholder-image.png", alt="")
            .wall
            .wall2
            .floor
        .img-container
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected];700&display=swap');
$color-principal: #9CF6F6;
$color-principal-50: #9CF6F650;
*{
    font-family: 'Inter', sans-serif;
}
html{
    overflow-x: hidden;
    overflow-y: hidden;
}
.container{
    position: relative;
    width: 100px;
    height: 100px;
    perspective: 200px;
    margin: 100px 0px;
    h1{
        color: $color-principal;
        font-weight: 700;
        margin: 0 30px;
        transform-style: preserve-3d;
        transform: rotateY(10deg) translateZ(30px);
    }
}
.item{
    margin: 0 30px;
    position: relative;
    width: 100px;
    height: 50px;
    background: $color-principal-50;
    opacity: 1;
    border: 3px solid $color-principal;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    transition: 0.5s;
    margin-top: 10px;
    transform-style: preserve-3d;
    transform: rotateY(10deg);
    
}
.item:hover{
    box-shadow: rgba(156, 246, 246, 0.3) 0px 19px 38px, rgba(156, 246, 246, 0.22) 0px 15px 12px;
    transform: rotateY(10deg) scale(1.1);
    background-color: #9CF6F6;
}
.img-container{
    margin: 0 30px;
    perspective: 700px;
}
.img{
    position: absolute;
    top: 40px;
    left: 150px;
    width: 300px;
    height: auto;
    border-radius: 5px;
    box-shadow:
    rgba(0, 0, 0, 0.048) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.1) 0px 1px 0px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 8px 0px,
    rgba(0, 0, 0, 0.2) 0px 20px 30px 0px;
    transform-style: preserve-3d;
    transform: rotateY(10deg) translateZ(-15px)translateX(10px) translateY(10px);
}
.wall{
    background-color: #303030;
    opacity: 1;
    height: 700px;
    width: 800px;
    position: absolute;
    top: -300px;
    z-index: -1;
    transform: rotateY(10deg) translateZ(-78px);
}
.floor{
    opacity: 1;
    background-color: #eee;
    height: 300px;
    width: 1000px;
    margin-top: 40px;
    transform: rotateY(10deg) rotateX(90deg) translateZ(1px) translateX(-10px);
    background-image: url("floor.jpg");
    background-repeat: repeat;
    background-size: 52.17px 60.23px;
}
.wall2{
    opacity: 1;
    background-color: #303030;
    height: 1200px;
    width: 800px;
    position: absolute;
    top: -300px;
    z-index: -1;
    transform: rotateY(100deg) translateX(-143px) translateY(-200px) translateZ(1050px);
} 

Hola, aquí les dejo unos enlaces de W3Schools sobre el tema de la perspectiva. Teoría Perespective
Ejemplo con dados

En el ejemplo también se explica el funcionamiento del transalateZ.

Luce así:

Al modifcar el item, le quito la propiedad transform-style: preserve-3d;
y me sigue mostrando igual :S

De las 8 clases esta fue la que menos me quedo clara😐 (voy a ver el video otra vez)

🍿Transform style y perspective

❤Perspective

La propiedad perspective es desde dónde se esta viendo el objeto, la perspectiva puede cambiar dependendiendo de qué tan lejos o cerca esté.

se trabaja con position relative y absolute siempre el relative va a ser el padre y el hijo absolute para que el absolute se adhiera al elemento contenedor esto en un caso general

https://www.youtube.com/watch?v=A6gYSyiEvjM

Hola compañeros, les comparto el CodePen donde estoy agregando todos los conceptos que estamos viendo en estas clases: https://codepen.io/Londrack/full/vYxPNQX

Para los que les quedó duda de perspective-origin les dejo este enlace y este otro y puedan notar la diferencia al aplicarles diferentes valores.

Creo que falto un poco de explicación a esta clase con respecto a la perspectiva como es que funciona. No quedo muy claro que tipos de valores permite y como ese valor influye en la misma. Otro punto negativo es que las clases tienen un poco de delay o retraso respecto al audio y video. Se hace un poco pesado ir escuchando y siguiendo el video unos milisegundos atrasado y aparte un poco como lageado. Se que se puede mejorar y esto no le quita que el curso y la teacher sean muy buenos, solo es un punto de mejora 🙌🏻

html

<!DOCTYPE html>
<htm llang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"href="style.css">
</head>
<body>
    <div class="container">
        <div class="cube">
            <div class="cube-wrap">
                <div class="linea"></div>
                <div class="linea"></div>
                <div class="linea"></div>
                <div class="linea"></div>
                <div class="linea"></div>
                <div class="linea"></div>
                <div class="linea"></div>
            </div>
        </div>
    </div>
</body>
</html>

css

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
body{
    width: 100%;
    height: 100vh;
    background-color: burlywood;
}

.container{
    width: 90%;
    height: 90%;
    margin: 40px auto;
    background: linear-gradient(90deg,red,blue);
    display: grid;
    place-items: center;
}

.cube{
    position: relative;
    width:100px;
    height: 100px;
    perspective: 50px;
}
.cube-wrap {
    position: absolute;
    width: 100px;
    height: 182px;
    background: papayawhip;
    opacity: 0.5;
    transform-style:preserve-3d;
    transform: rotateX(20deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.cube-wrap .linea{
    background: white;
    width: 10px;
    height: 15px;
    margin-top: 10px;
}


Me dió por improvisar un rato utilizando algo de lo que hasta ahora hemos visto y pues me salió esto con base en el ejemplo que puso la profe en este capítulo del curso.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="body-main">
        <div class="container">
            <div class="item"></div>
            <div class="guia"></div>
            <div class="guia2"></div>
            <div class="guia3"></div>
        </div>
    </div>
</body>
</html>
* {
    padding: 0;
    margin: 0;
}

.body-main {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

.container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 5px solid rgb(100, 60, 0);
    perspective: 25px;
    /* perspective lo que nos da es profundidad */
    margin: 0 auto;
}



.item {
    position: absolute;
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    bottom: 0;
    background: papayawhip;
    border-bottom: 1px solid rgb(100, 60, 0);
    transform-style: preserve-3d;
    transform: rotateX(20deg);
    
}

.guia {
    position: absolute;
    height: 315px;
    border: 1px 0solid rgb(32, 32, 32);
    transform: rotate(22deg);
    transform-style: preserve-3d;
    left: calc(20% - 1px);
    bottom: -207px;
}

.guia2 {
    position: absolute;
    height: 315px;
    border: 1px solid rgb(32, 32, 32);
    transform: rotate(22deg);
    transform-style: preserve-3d;
    left: calc(20% - 1px);
    bottom: -207px;
}

.guia3 {
    position: absolute;
    height: 315px;
    border: 1px solid rgb(32, 32, 32);
    transform: rotate(-22deg);
    transform-style: preserve-3d;
    left: calc(80% - 1px);
    bottom: -207px;
}```

Par que se utiliza el Trasnform style?
Para decirle si es en 2d o 3d!

Perspective
Nos da la profundidad
No lo vamos a poder ver pero el valor esta agregado con esta propiedad!

Perspective origin
Nos da la profundidad pero desde otro angulo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            position: relative;
            width: 100px;
            height: 100px;
            border: 4px solid hotpink;
            perspective: 100px;
            margin: 50px;
        }
        .item{
            position: absolute;
            width: 100px;
            height: 100px;
            background: papayawhip;
            border: 3px solid hotpink;
            opacity: 0.5;
        }
        .item:hover{
            transform-origin: left;
            transform-style: preserve-3d;
            transition: 1s;
            transform: rotatey(40deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
    </div>
</body>
</html>

blow-minding 🤯