3388
ediciones
Cambios
sin resumen de edición
text-align: center;
}
.container{
position: relative;
width: 300px;
height: 400px;
perspective: 1000px;
transform-style: preserve-3d;
}
.card{
position: absolute;
width: 100%;
height: 100%;
display: grid;
place-items: center;
border-left: rgba(255, 255, 255, 0.342) 1px solid;
border-top: rgba(255, 255, 255, 0.342) 1px solid;
border-radius: 20px;
backdrop-filter: blur(30px);
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
color: white;
backface-visibility: hidden;
font-family: Arial, Helvetica, sans-serif;
transform: rotateY(0deg);
transform-style: preserve-3d;
transition: 2.5s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.front{
background: rgba(255, 255, 255, 0.109);
transform: rotateY(0deg);
padding: 10px;
}
.back{
background: rgba(255, 255, 255, 0.109);
transform: rotateY(180deg);
padding: 10px;
}
.container:hover > .front{
transform: rotateY(-180deg);
}
.container:hover > .back{
transform: rotateY(0deg);
}
.btn{
border: 1px solid white;
background: rgba(255, 255, 255, 0.21);
padding: 10px 20px;
border-radius: 20px;
text-decoration: none;
color: white;
transition: all 0.5s;
}
.btn:hover{
padding: 10px 40px;
background: white;
color:black
}