在不同变换中翻转瓷砖

Question

嗨，我创建了具有翻转和缩放效果的瓷砖。

我想添加不同的转换到每个瓷砖。我正试图使用​​CSS来实现这一点。我需要一些帮助。

这里是代码我试过了。

HTML：

<div class="wrap" data-sap-ui-preserve="html1" id="html1"> 
    <div class="box"> 
     <div class="boxInner"> 
      <div class="face front"> 
       <img src="images/s.png"> 
      </div> 
      <div class="face back"> 
       <label class="text">Search Donors...</label> 
      </div> 
     </div> 
    </div> 
    <div class="box"> 
     <div class="boxInner clicked"> 
      <div class="face front"> 
       <img src="images/r.png"> 
      </div> 
      <div class="face back"> 
       <label class="text">Register</label> 
      </div> 
     </div> 
    </div> 
    <div class="box"> 
     <div class="boxInner clicked"> 
      <div class="face front"> 
       <img src="images/u.png"> 
      </div> 
      <div class="face back"> 
       <label class="text">Update Details</label> 
      </div> 
     </div> 
    </div> 
    <div class="box"> 
     <div class="boxInner clicked"> 
      <div class="face front"> 
       <img src="images/s.png"> 
      </div> 
      <div class="face back"> 
       <label class="text">Share</label> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.wrap { 
    overflow: hidden; 
    margin: 10px; 
    -webkit-transform: translateZ(0); 
    position: relative; 
    top: 0px; 
} 

.box { 
    float: left; 
    position: relative; 
    width: 25%; 
    /* padding-bottom: 15%; */ 
    padding-bottom: 10px; 
} 

.boxInner { 
    overflow: hidden; 
    margin: 10px; 
    -moz-transform: scale(1); 
    -o-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    opacity: 1; 
    -moz-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5); 
    -o-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5); 
    -webkit-transition: all 0.5s ease-in; 
    transition: all 0.5s ease-in; 
    -webkit-box-shadow: #666 0px 0px 6px; 
    -moz-box-shadow: #666 0px 0px 6px; 
    box-shadow: #666 0px 0px 6px; 
} 

.boxInner:hover { 
    -webkit-box-shadow: #666 0px 0px 6px; 
    -moz-box-shadow: #666 0px 0px 6px; 
    box-shadow: #666 0px 0px 6px; 
    -moz-transform: scale(1.05); 
    -webkit-transform: scale(1.05); 
    -o-transform: scale(1.05); 
    transform: scale(1.05); 
} 

.boxInner img { 
    width: 100%; 
} 

.flip { 
    -webkit-transform: rotatex(-180deg) !important; 
} 

.front { 
    z-index: 1; 
    cursor: pointer; 
    opacity: 1; 
} 

.back { 
    -webkit-transform: rotatex(-180deg); 
    cursor: pointer; 
    opacity: 0; 
} 

.box .boxInner.clicked .back { 
    opacity: 1; 
} 

.box .boxInner.clicked .front { 
    opacity: 0; 
} 

.box .boxInner.clicked { 
    -webkit-transform: scaleY(-1); 
} 

.face { 
    transition: all 0.5s linear; 
    position:relative; 
} 

.text{ 
    padding-top:35%; 
    position: absolute; 
    margin-left:35%; 
    color:#666666; 
    font-weight:bold; 
    font-size:100%; 
} 

.text::first-letter{ 
    font-size:400%; 
    color:#009de0; 
    margin-top:10px; 
} 

body.no-touch .boxInner:hover .titleBox,body.touch .boxInner.touchFocus .titleBox 
    { 
    margin-bottom: 0; 
} 

@media only screen and (max-width : 480px) { 
    /* Smartphone view: 1 tile */ 
    .box { 
     width: 100%; 
    } 
} 

@media only screen and (max-width : 650px) and (min-width : 481px) { 
    /* Tablet view: 2 tiles */ 
    .box { 
     width: 50%; 
    } 
} 

@media only screen and (max-width : 1050px) and (min-width : 651px) { 
    /* Small desktop/ipad view: 3 tiles */ 
    .box { 
     width: 33.3%; 
    } 
} 

@media only screen and (max-width : 1290px) and (min-width : 1051px) { 
    /* Medium desktop: 4 tiles */ 
    .box { 
     width: 25%; 
    } 
} 

JS：

$(".boxInner").click(function(){ 
       $(this).toggleClass("clicked"); 
      }); 

Demo Link

Answer 1

这里的FIDDLE你问什么。我不擅长使用jquery或javascript。我已经添加了toggleClass的功能，但我不擅长使用它，否则CSS3 Transitions非常流畅和清晰。只需编辑jquery和类，然后一切都很好。