Limited availability during the holidays
Another busy year is coming to its end, and an exciting year lies ahead. In order to get ready for a fresh new start, our team will spend a few days' rest during the winter holidays. Over the holiday break, we will have reduced staffing from December 20th, 2025, to January 4th, 2026, so please be patient if you do not receive a response as quickly as you normally would.
We send our warmest wishes for happiness, health, and success throughout the coming year. Thank you for your continued support, and may you have a peaceful and blessed Happy Holidays!
Hello,
I understand i cant make the flip box in wordpress. So I'm making one using the jquery version everything is working except for the back face visibility. Do you know why the back face visibility wouldn't be working in this plug in? please find screen shot and i will attach the HTML. I intentionally left one side (back-side )at 50% width to show that there are two sides of the card. If the backface can be hidden everything should work.
<meta charset="UTF-8"> <title>flipbox</title> <!-- LayerSlider CSS --> <link rel="stylesheet" href="../../layerslider/css/layerslider.css"> <!-- External libraries: jQuery & GreenSock --> <script src="../../layerslider/js/jquery.js"></script> <script src="../../layerslider/js/greensock.js"></script> <!-- LayerSlider script files --> <script src="../../layerslider/js/layerslider.transitions.js"></script> <script src="../../layerslider/js/layerslider.kreaturamedia.jquery.js"></script> <style type="text/css"> .back{backface-visibility: hidden!important; position: absolute!important; background-color: yellow!important; height: 100%; width:50%; } .front{backface-visibility: hidden!important; position: absolute!important;} </style> <!-- Slider HTML markup --> <div id="slider" style="width:1280px;height:100vh;margin:0 auto;margin-bottom: 0px;"> <!-- Slide 1--> <div class="ls-slide" data-ls="bgcolor:#ffffff; kenburnsscale:1.2;"> <div style="top:181px; left:549px; width:276px; height:354px; background:rgba(0, 0, 0, 0.99); color:#ffffff; font-size:14px; position: relative;" class="ls-l flip" data-ls="fadein:false; transformperspectivein:512; transitionout:false; hover:true; hoverdurationin:1000; hoverrotatey:180; hovertransformperspective:800;"> <div class="front" style="backface-visibility: hidden!important;"> <img src="http://www.vrcutready.com/wp-content/uploads/2019/08/favicon.png" style="margin: 1rem auto; width: 50%;"> <h2 style="margin: 0 auto 1rem auto; font-family: inherit; color: inherit; font-size: 1em; text-transform: uppercase;"> sample title </h2> <p style="margin: 0 auto; font-family: inherit; color: inherit; font-size: 0.75em;"> Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="back"> <img src="http://www.vrcutready.com/wp-content/uploads/2019/08/favicon.png" style="margin: 1rem auto; width: 50%;"> <h2 style="margin: 0 auto 1rem auto; font-family: inherit; color: inherit; font-size: 1em; text-transform: uppercase; color:black;"> TEST </h2> <p style="margin: 0 auto; font-family: inherit; color: inherit; font-size: 0.75em;"> </p> </div> </div> </div> </div> <!-- Initializing the slider --> <script type="text/javascript"> $(document).ready(function() { $('#slider').layerSlider({ createdWith: '6.8.4', sliderVersion: '6.8.4', type: 'fullsize', skin: 'v6', useSrcset: false, skinsPath: '../../layerslider/skins/', height: 720 }); }); </script>Hey Alex ;-)
Try with this CSS:
.flip {
backface-visibility: hidden !important;
}
.back{
backface-visibility: hidden !important;
position: absolute;
background: blue;
height: 100%;
width:100%;
transform: rotateY(10deg);
left: 0;
top: 0;
}
.front{
backface-visibility: hidden !important;
position: absolute;
height: 100%;
width:100%;
background: red;
left: 0;
top: 0;
}
and it is important to switch the order of the two inner DIVs, so the -back should be the first in the code and the .front should be the second.
Best Regards,
George | Kreatura Dev Team
Hey George,
Thank you for the response unfortunately this solution doesn't work. I feel like were really close... The backface is still visible
I have created a test file locally and it is fully working for me.
Best Regards,
George | Kreatura Dev Team
George
Can you please share your code.I have tried this own two different systems and it dosen't work here is my code you said transform: rotateY(10deg); I believe you met 180deg, i obviously tried both. I have also tried with my inline styles removed
<meta charset="UTF-8"> <title>flipbox</title> <!-- LayerSlider CSS --> <link rel="stylesheet" href="../../layerslider/css/layerslider.css"> <!-- External libraries: jQuery & GreenSock --> <script src="../../layerslider/js/jquery.js"></script> <script src="../../layerslider/js/greensock.js"></script> <!-- LayerSlider script files --> <script src="../../layerslider/js/layerslider.transitions.js"></script> <script src="../../layerslider/js/layerslider.kreaturamedia.jquery.js"></script> <style type="text/css"> .flip { backface-visibility: hidden !important; } .back{ backface-visibility: hidden !important; position: absolute; background: blue; height: 100%; width:100%; transform: rotateY(10deg); left: 0; top: 0; } .front{ backface-visibility: hidden !important; position: absolute; height: 100%; width:100%; background: red; left: 0; top: 0; } </style> <!-- Slider HTML markup --> <div id="slider" style="width:1280px;height:100vh;margin:0 auto;margin-bottom: 0px;"> <!-- Slide 1--> <div class="ls-slide" data-ls="bgcolor:#ffffff; kenburnsscale:1.2;"> <div style="top:181px; left:549px; width:276px; height:354px; background:rgba(0, 0, 0, 0.99); color:#ffffff; font-size:14px; position: relative;" class="ls-l flip" data-ls="fadein:false; transformperspectivein:512; transitionout:false; hover:true; hoverdurationin:1000; hoverrotatey:180; hovertransformperspective:800;"> <div class="front" style="backface-visibility: hidden!important;"> <img src="http://www.vrcutready.com/wp-content/uploads/2019/08/favicon.png" style="margin: 1rem auto; width: 50%;"> <h2 style="margin: 0 auto 1rem auto; font-family: inherit; color: inherit; font-size: 1em; text-transform: uppercase;"> sample title </h2> <p style="margin: 0 auto; font-family: inherit; color: inherit; font-size: 0.75em;"> Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="back"> <img src="http://www.vrcutready.com/wp-content/uploads/2019/08/favicon.png" style="margin: 1rem auto; width: 50%;"> <h2 style="margin: 0 auto 1rem auto; font-family: inherit; color: inherit; font-size: 1em; text-transform: uppercase; color:black;"> TEST </h2> <p style="margin: 0 auto; font-family: inherit; color: inherit; font-size: 0.75em;"> </p> </div> </div> </div> </div> <!-- Initializing the slider --> <script type="text/javascript"> $(document).ready(function() { $('#slider').layerSlider({ createdWith: '6.8.4', sliderVersion: '6.8.4', type: 'fullsize', skin: 'v6', useSrcset: false, skinsPath: '../../layerslider/skins/', height: 720 }); }); </script> ATTACHED FILES: Flip.JPGYes your are right, it should be 180deg and your code is fine, except - as I mentioned in my first reply - you should switch the two DIVs. In your code, the .front DIV is the first and the .back is the second. You should put the .front AFTER the .back and it should work.
Best Regards,
George | Kreatura Dev Team