Lo que estoy tratando de hacer, es que sobre una pantalla(div) donde almaceno todos los objetos(botones y otros elementos...) tenga una transición. Esta transición va a tener dos "cortinas" que realmente son 2 triángulos hechos con un div y estilo bottom. Cuando realice la deformación de la primera cortina izquierda, salió muy bien, no tenía errores, pero cuando quise invertirla y ponerla como cortina derecha con el método "transform: rotate()", esta se cambiaba de posición.
Aquí dejo unos ejemplos de lo que avance y de como quisiera que se vea. Me gustaría que me ayudasen y me digan si es posible realizar lo que deseo.
#1 Probando la cortina izquierda
const btnOpenWindow = document.getElementById("openWin");
const tranLeft = document.getElementById("transitionLeft");
const tranRight = document.getElementById("transitionRight");
// Add Event on click button
btnOpenWindow.addEventListener("click",function(){
let transition = {
left: 0,
right: 0,
loop: 0,
dateLoop: "",
}
transition.dateLoop = setInterval(windowOpenClose, 5);
function windowOpenClose(){
tranLeft.style.borderBottom = `${transition.left}px solid transparent`;
// tranRight.style.borderBottom = `${transition.left}px solid transparent`;
if(transition.loop == 0){
transition.left += 4;
}
if(transition.loop == 1){
transition.left -= 4;
}
if(transition.loop == 0 && transition.left == 600){
transition.loop = 1;
}
if(transition.loop == 1 && transition.left == -1){
transition.loop = 0;
transition.left = 0;
transition.right = 0;
clearInterval(transition.dateLoop);
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#box{
background-color: palevioletred;
width: 800px;
height: 600px;
}
#transitionLeft{
width: 0;
height: 0;
border-left: 800px solid black;
border-bottom: 0px solid transparent;
position: absolute;
}
#transitionRight{
width: 0;
height: 0;
border-left: 800px solid black;
border-bottom: 600px solid transparent;
transform: rotate(180deg);
position: absolute;
}
</style>
<div id="box">
<div id="transition">
<div id="transitionLeft"></div>
<div id="transitionRight"></div>
</div>
</div>
<br>
<button id="openWin">Open</button>
</body>
</html>
#2 Probando la cortina derecha
const btnOpenWindow = document.getElementById("openWin");
const tranLeft = document.getElementById("transitionLeft");
const tranRight = document.getElementById("transitionRight");
// Add Event on click button
btnOpenWindow.addEventListener("click",function(){
let transition = {
left: 0,
right: 0,
loop: 0,
dateLoop: "",
}
transition.dateLoop = setInterval(windowOpenClose, 5);
function windowOpenClose(){
tranLeft.style.borderBottom = `${transition.left}px solid transparent`;
tranRight.style.borderBottom = `${transition.left}px solid transparent`;
if(transition.loop == 0){
transition.left += 4;
}
if(transition.loop == 1){
transition.left -= 4;
}
if(transition.loop == 0 && transition.left == 600){
transition.loop = 1;
}
if(transition.loop == 1 && transition.left == -1){
transition.loop = 0;
transition.left = 0;
transition.right = 0;
clearInterval(transition.dateLoop);
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#box{
background-color: palevioletred;
width: 800px;
height: 600px;
}
#transitionLeft{
width: 0;
height: 0;
border-left: 800px solid black;
border-bottom: 0px solid transparent;
position: absolute;
}
#transitionRight{
width: 0;
height: 0;
border-left: 800px solid yellow;
border-bottom: 0px solid transparent;
transform: rotate(180deg);
position: absolute;
}
</style>
<div id="box">
<div id="transition">
<div id="transitionLeft"></div>
<div id="transitionRight"></div>
</div>
</div>
<br>
<button id="openWin">Open</button>
</body>
</html>
#3 Como me gustaria que sea el efecto
Muchas gracias!