'Backface-visibility IS not working in my css code
I'm trying to design a login page where I designed a cover to flip when we shift from login page to sign-up page...everything works well except the backface-visibility of the images and text in the cover.
I've tried a lot of changes in the code but I'm not able to find a solution.
Thanks for any help that you can give😊
HTML:
<div class="container">
<input type="checkbox" id="flip">
<div class="cover">
<div class="front">
<img src="img.jpg" alt="">
<div class="text">
<span class="text-1">XYZ</span>
<span class="text-2">Where your dreams come true</span>
</div>
</div>
<div class="back">
<img class= "backimg" src="backimg.png" alt="">
<div class="text">
<span class="text-1">Some Random <br> texts for you</span>
<span class="text-2">Let's get started</span>
</div>
</div>
</div>
<form action="#">
<div class="form-content">
<div class="login-form">
<div class="title">Login</div>
<div class="input-boxes">
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="text" placeholder="Enter your email" required>
</div>
</div>
<div class="input-boxes">
<div class="input-box">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Enter your password" required>
</div>
<div class="text"><a href="#">Forgot password?</a></div>
<div class="button">
<input type="submit" value="Submit">
</div>
<div class="text login-text">Don't have an account? <label for="flip">Signup now</label></div>
</div>
</div>
<div class="signup-form">
<div class="title">Sign Up</div>
<div class="input-boxes">
<div class="input-box">
<i class="fas fa-user"></i>
<input type="text" placeholder="Enter your name" required>
</div>
</div>
<div class="input-boxes">
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="text" placeholder="Enter your email" required>
</div>
</div>
<div class="input-boxes">
<div class="input-box">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Enter your password" required>
</div>
<div class="button">
<input type="submit" value="Submit">
</div>
<div class="text sign-up-text">Already have an account? <label for="flip">Login now</label></div>
</div>
</div>
</form>
</div>
CSS:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: url('background.png');
background-color: rgb(33, 63, 199);
background-size: cover;
height: 100px;
background-repeat: no-repeat;
background-position: center;
position: relative;
padding: 30px;
}
.container{
position: relative;
height: 85%;
max-width: 850px;
width: 100%;
background: #ffffff;
padding: 40px 30px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
perspective: 2800px;
}
.container .cover{
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 50%;
z-index: 98;
transform-origin: left;
transition: all 1s ease;
transform-style: preserve-3d;
}
.container #flip:checked ~ .cover{
transform: rotateY(-180deg);
}
.container .cover::before{
content: '';
position: absolute;
height: 100%;
width: 100%;
background: rgb(12, 30, 104);
opacity: 0.4;
z-index: 100;
}
.container .cover::after{
content: '';
position: absolute;
height: 100%;
width: 100%;
background: rgb(12, 30, 104);
opacity: 0.4;
z-index: 100;
transform: rotateY(180deg);
}
.container .cover .front img{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: 12;
}
.container .cover .back .backimg{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: 12;
transform: rotateY(180deg);
}
.container .cover .text{
position: absolute;
z-index: 111;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cover .text .text-1,
.cover .text .text-2 {
font-size: 26px;
font-weight: 600;
color: #fff;
text-align: center;
backface-visibility: hidden;
}
.cover .back .text .text-1,
.cover .back .text .text-2 {
transform: rotateY(180deg);
}
.cover .text .text-2{
font-weight: 15px;
font-weight: 500;
}
.container form{
height: 100%;
width: 100%;
background:#fff;
}
.container .form-content{
display: flex;
align-items: center;
justify-content: space-between;
}
.form-content .login-form,
.form-content .signup-form{
width: calc(100% / 2 - 25px);
/* background: red; */
}
form .form-content .title{
position: relative;
font-size: 24px;
font-weight: 500;
color: #333;
}
form .form-content .title:before{
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3.5px;
width: 25px;
background: rgb(33, 63, 199);
}
form .signup-form .title:before{
width: 30px;
}
form .form-content .input-boxes{
margin-top: 25px;
}
form .form-content .input-box{
display: flex;
align-items: center;
height: 50px;
width: 100%;
margin: 10px 0;
position: relative;
}
.form-content input{
height: 100%;
width: 100%;
outline: none;
border: none;
padding: 0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.form-content input:focus,
.form-content input:valid{
border-color:rgb(33, 63, 199) ;
}
.form-content .input-box i{
position: absolute;
color: rgb(33, 63, 199) ;
font-size: 17px;
}
form .form-content .text{
font-size: 14px;
font-weight: 500;
color:#333;
}
form .form-content .text a{
text-decoration: none;
}
form .form-content .text a:hover{
text-decoration: underline;
}
form .form-content .button{
color: #fff;
margin-top: 25px;
height: 50px;
}
form .form-content .button input{
color: #fff;
margin-top: 15px;
}
form .form-content .button input{
color: #fff;
background: rgb(33, 63, 199);
border-radius: 6px;
padding: 0;
cursor: pointer;
transition: all 0.4s ease;
}
form .form-content .button input:hover{
background: rgb(21, 41, 133) ;
}
form .form-content label{
color: rgb(21, 41, 133);
cursor: pointer;
}
form .form-content label:hover{
text-decoration: underline;
}
form .form-content .login-text,
form .form-content .sign-up-text{
text-align: center;
margin-top: 35px;
}
.container #flip{
display: none;
}
@media (max-width: 730px){
.container .cover{
display: none;
}
.form-content .login-form,
.form-content .signup-form{
width: 100%;
}
.form-content .signup-form{
display: none;
}
.container #flip:checked ~ form .signup-form{
display: block;
}
.container #flip:checked ~ form .login-form{
display: none;
}
}
Solution 1:[1]
you want like this, using " transform: scale(-1, 1)" property your can flip your text.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Satish Modha |