Привет, я создал плитки с эффектами флип и масштабирования.
Я пытаюсь добавить различные преобразования для каждой плитки. Я пытаюсь достичь этого, используя только 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");
});
Здесь FIDDLE за то, что вы просили. Я не jquery
использовать jquery
или javascript
. Я добавил функцию для toggleClass, но я не очень хорошо ее использую, иначе CSS3 Transitions
очень плавные и понятные. Просто отредактируйте jquery и классы, тогда все будет хорошо.