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 George,

Thank you for the response unfortunately this solution doesn't work. I feel like were really close... The backface is still visible    

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.JPG