0
Wie kann ich Mitte auf diese Skala Animation anwenden?
Wie Sie die div dissapear nach rechts in nächsten Beispiel zu sehen, muss ich Mitte der Skala Animation anwenden:Center-Skala Animation css3
$(document).ready(function() {
$("button").click(function() {
$(".container:first").addClass("remove")
});
});.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX(-100%) rotateY(-180deg);
-moz-transform: translateX(-100%) rotateY(-180deg);
-o-transform: translateX(-100%) rotateY(-180deg);
transform: translateX(-100%) rotateY(-180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
display: flex;
justify-content: center;
align-items: center;
}
.remove{
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
animation: removeAnim 0.5s ease,
otherAnimation 0.5s ease;
}
@keyframes otherAnimation {
0% {
transform: scale(1.0);
}
25% {
transform: scale(0.75);
}
50% {
transform: scale(0.50);
}
75% {
transform: scale(0.25);
}
100%{
transform: scale(0);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
<button>Remove</button>
</div>
</div>