如何更改此翻转卡以垂直翻转？

Question

我希望它不是从右到左，然后从左到右，而是从下到上，从后面，从上到下。我该怎么做呢？我尝试了一些解决方案并持续了几个小时，所以我写信给你：/。

＆＃13;

＆＃13;

 $(document).ready(function () {
        $('.flipWrapper').click(function () {
            $(this).find('.card').toggleClass('flipped');
            return false;
        });
    });
    
    

＆＃13;

    .flipWrapper {
    -webkit-perspective: 1000;
    width: 400px;
    height: 200px;
    position: relative;
    margin: 50px auto;
    }
    .flipWrapper .card.flipped {
    -webkit-transform: rotatey(180deg);
    }
    .flipWrapper .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    }
    .flipWrapper .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
    }
    .flipWrapper .card .front {
    position: absolute;
    z-index: 1;
    background: rgb(57, 171, 62);
    color: white;
    cursor: pointer;
    border-radius: 10px;
    }
    .flipWrapper .card .back {
    -webkit-transform: rotatey(-180deg);
    background: blue;
    background: red;
    color: white;
    cursor: pointer;
    border-radius: 10px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     <br> <br> <br> <br>
     <div class="jumbotron">
    
        <!--card flip begins-->
       
         <div class="flipWrapper">
            <div class="card">
                <div class="face front">
                    jQuery
                </div>
                <div class="face back">
                    Script
                </div>
            </div>
        </div>
        <!--card flip ends-->
           
     </div>
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您希望将CSS3 transform属性与rotatex一起使用，而不是rotatey

Answer 2

只需从-webkit-transform: rotatey(-180deg);更改为-webkit-transform: rotatex(-180deg);即可。我认为这就是你要找的东西。

 $(document).ready(function () {
        $('.flipWrapper').click(function () {
            $(this).find('.card').toggleClass('flipped');
            return false;
        });
    });
    
    

    .flipWrapper {
    -webkit-perspective: 1000;
    width: 400px;
    height: 200px;
    position: relative;
    margin: 50px auto;
    }
    .flipWrapper .card.flipped {
    -webkit-transform: rotatex(180deg);
    }
    .flipWrapper .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    }
    .flipWrapper .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
    }
    .flipWrapper .card .front {
    position: absolute;
    z-index: 1;
    background: rgb(57, 171, 62);
    color: white;
    cursor: pointer;
    border-radius: 10px;
    }
    .flipWrapper .card .back {
    -webkit-transform: rotatex(-180deg);
    background: blue;
    background: red;
    color: white;
    cursor: pointer;
    border-radius: 10px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
     		<br> <br> <br> <br>
        	<div class="jumbotron">
    
        <!--card flip begins-->
       
         <div class="flipWrapper">
            <div class="card">
                <div class="face front">
                    jQuery
                </div>
                <div class="face back">
                    Script
                </div>
            </div>
        </div>
        <!--card flip ends-->
    
    
  
    
    
    
         </div>
        </div>