Okay
  Public Ticket #2108500
Flip box
Open

Comments

  • alexlytle12345 started the conversation

    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>
    

    Attached files:  Flip.JPG

  •  11
    George replied

    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

  • alexlytle12345 replied

    Hey George,

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

  •  11
    George replied

    I have created a test file locally and it is fully working for me.

    Best Regards,
    George | Kreatura Dev Team

  • alexlytle12345 replied

    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
    
  •  11
    George replied

    Yes 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