How can I apply center to this scale animation?
As you see in next example the div dissapear to the right, I need to apply center to the scale animation:
$(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>
Edit your .remove class in your CSS to:
transform-origin: center;
Or just remove all references to transform-origin in this class as the default is center anyway.
$(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: center;
-moz-transform-origin: center;
-o-transform-origin: center;
transform-origin: 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>
Remove the following lines from the .remove class in your CSS.
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
You specified the transform-origin: right center inside the .remove class:
.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; // Remove this line
-moz-transform-origin: right center; // Remove this line
-o-transform-origin: right center; // Remove this line
transform-origin: right center; // Remove this line
animation: removeAnim 0.5s ease,
otherAnimation 0.5s ease;
}
You can just remove the lines because center center is the default behavior
Related
I'm using a lightbox system on a page and I'm trying to get an image to go half inside the content of the lightbox and half above it - Like This
I've been editing some of the css to add z-index but that isnt helping.
Current HTML
<div class="nivo-lightbox-content"><div class="nivo-lightbox-inline" style="position: relative; top: 50%; margin-top: -281.95px;"><div id="s-b" style="" class="popuptxt">
<img src="https://example.com/b/wp-content/uploads/2022/05/s_b_popup.jpg" class="popupimg"><br>
<h3>SB</h3>
<h4>MD</h4>
<img loading="lazy" src="https://example.com/b/wp-content/uploads/2022/05/logo.png" width="65px" height="65px"><br>
Test Text<br>
all goes here.
</div></div></div><div class="nivo-lightbox-title-wrap"></div>
and CSS Code
.nivo-lightbox-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 99998;
width: 100%;
height: 100%;
overflow: hidden;
visibility: hidden;
opacity: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nivo-lightbox-overlay.nivo-lightbox-open {
visibility: visible;
opacity: 1;
}
.nivo-lightbox-wrap {
position: absolute;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
}
.nivo-lightbox-content {
width: 100%;
height: 100%;
}
.nivo-lightbox-title-wrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 99999;
text-align: center;
}
.nivo-lightbox-nav { display: none; }
.nivo-lightbox-prev {
position: absolute;
top: 50%;
left: 0;
}
.nivo-lightbox-next {
position: absolute;
top: 50%;
right: 0;
}
.nivo-lightbox-close {
position: absolute;
top: 2%;
right: 2%;
}
.nivo-lightbox-image { text-align: center; }
.nivo-lightbox-image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.nivo-lightbox-content iframe {
width: 100%;
height: 100%;
}
.nivo-lightbox-inline,
.nivo-lightbox-ajax {
max-height: 100%;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* https://bugzilla.mozilla.org/show_bug.cgi?id=308801 */
}
.nivo-lightbox-error {
display: table;
text-align: center;
width: 100%;
height: 100%;
color: #fff;
text-shadow: 0 1px 1px #000;
}
.nivo-lightbox-error p {
display: table-cell;
vertical-align: middle;
}
/* Effects
**********************************************/
.nivo-lightbox-notouch .nivo-lightbox-effect-fade,
.nivo-lightbox-notouch .nivo-lightbox-effect-fadeScale,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideLeft,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideRight,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideUp,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideDown,
.nivo-lightbox-notouch .nivo-lightbox-effect-fall {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* fadeScale */
.nivo-lightbox-effect-fadeScale .nivo-lightbox-wrap {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
}
.nivo-lightbox-effect-fadeScale.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/* slideLeft / slideRight / slideUp / slideDown */
.nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideUp .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-ms-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap {
-webkit-transform: translateX(-10%);
-moz-transform: translateX(-10%);
-ms-transform: translateX(-10%);
transform: translateX(-10%);
}
.nivo-lightbox-effect-slideRight .nivo-lightbox-wrap {
-webkit-transform: translateX(10%);
-moz-transform: translateX(10%);
-ms-transform: translateX(10%);
transform: translateX(10%);
}
.nivo-lightbox-effect-slideLeft.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
-webkit-transform: translateY(-10%);
-moz-transform: translateY(-10%);
-ms-transform: translateY(-10%);
transform: translateY(-10%);
}
.nivo-lightbox-effect-slideUp .nivo-lightbox-wrap {
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%);
}
.nivo-lightbox-effect-slideUp.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideDown.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
/* fall */
.nivo-lightbox-body-effect-fall .nivo-lightbox-effect-fall {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.nivo-lightbox-effect-fall .nivo-lightbox-wrap {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transform: translateZ(300px);
-moz-transform: translateZ(300px);
-ms-transform: translateZ(300px);
transform: translateZ(300px);
}
.nivo-lightbox-effect-fall.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
Any ideas what I'm missing?
I'm pretty sure it should just be a case of adding z-index to a couple of the classes but nothing seems to work - I just seem to be able to hide the image or move the image but not get it to display.
Please indicate the error. Why is the menu button not displayed when opening the menu?
After clicking on the Burger, the button remains under the menu. For spanы I used position: relative and z-index, but the result is the same.
Can there be a problem in the fact that transition is applied to spans when clicking?
$(document).ready(function(){
$('#nav-btn').click(function(){
$('#menu').toggleClass('is-opened');
$(this).toggleClass('open');
});
});
.container {
background-color: rgba(12, 20, 40, 0.24);
min-height: 600px;
}
#nav-btn {
width: 24px;
height: 24px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;
}
#nav-btn span {
display: block;
position: relative;
height: 3px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 999;
}
#nav-btn span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(2) {
top: 7px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(3) {
top: 14px;
width: 70%;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn.open span:nth-child(1) {
will-change: transform;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
will-change: transform;
top: 18px;
width: 30px;
}
#nav-btn.open span:nth-child(2) {
will-change: transform;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
will-change: transform;
top: -3px;
width: 30px;
}
#nav-btn.open span:nth-child(3) {
width: 0%;
opacity: 0;
}
#menu {
background-color: black;
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
}
#menu.is-opened {
background-color: black;
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: 0px;
margin-top: 0;
transition: all 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div id="nav-btn">
<span></span> <span></span> <span></span>
</div>
<div id="menu">
123
</div>
</div>
</body>
</html>
i gave z-index:10 to #nav-btn and it worked
Z index work perfectly fine due to position: absolute; you have to adjust your element and also when menu is open you will need to change the color. check snippet.
$(document).ready(function() {
$('#nav-btn').click(function() {
$('#menu').toggleClass('is-opened');
$(this).toggleClass('open');
});
});
.container {
background-color: rgba(12, 20, 40, 0.24);
min-height: 600px;
}
#nav-btn {
width: 24px;
height: 24px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;
z-index: 1;
}
#nav-btn span {
display: block;
position: relative;
height: 3px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 999;
}
#nav-btn span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(2) {
top: 7px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(3) {
top: 14px;
width: 70%;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn.open span:nth-child(1) {
will-change: transform;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
will-change: transform;
top: 18px;
width: 30px;
}
#nav-btn.open span:nth-child(2) {
will-change: transform;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
will-change: transform;
top: -3px;
width: 30px;
}
#nav-btn.open span:nth-child(3) {
width: 0%;
opacity: 0;
}
#menu {
background-color: black;
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
color: #fff;
}
#menu.is-opened {
background-color: black;
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: 0px;
margin-top: 0;
transition: all 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div id="nav-btn">
<span></span> <span></span> <span></span>
</div>
<div id="menu">
123
</div>
</div>
</body>
</html>
I am trying to create a flip over effect where the content of the div changes, though not able to figure out why the text disappears after a few seconds.
I have added backface-visibility:hidden though no use!
HTML
<div class="tweets">
<div class="front">
This is the front
</div>
<div class="back">
Back this is
</div>
</div>
CSS
.tweets{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 2s;
-webkit-transition: transform 2s;
transition-delay:0s;
-webkit-transition-delay:0s;
background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
background-size:cover;
}
.tweets.flipped{
transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
background-size:cover;
}
.back{
transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
Can anyone help ?
I think this is what you are looking for, i have created square block of 220px(change as per your requirement), which has image you linked in question as background.
JSFiddle
CSS
.flip-container {
position:relative;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
.flip-container:hover .flipper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform:rotateY(180deg);
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
filter: FlipH;
-moz-filter: FlipH;
-ms-filter:"FlipH";
}
.flip-container, .front, .back {
width: 220px;
height: 220px;
}
.flipper {
-webkit-transition: 0.8s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.8s;
-ms-transform-style: preserve-3d;
-moz-transition: 0.8s;
-moz-transform-style: preserve-3d;
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg') no-repeat;
background-size:100% 100%;
color:red;
}
.front:hover {
transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
}
.back {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: FlipH;
}
.front-title {
font-size:20px;
text-align:center;
}
.back-title {
font-size:25px;
text-align:center;
}
HTML
<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="front-title">I am front Text</div>
</div>
<div class="back">
<div class="back-title">I am text behind </div>
</div>
</div>
</div>
I'm making a 3d box so I need most elements absolutely positioned. Front side is img, side is an empty div at the moment. Third div is a caption div, over the image with opacity of 0. I made simple hover effect to change this opacity to 1, it's working fine in FF, but not in Chrome.
I've seen that there are some bugs when using hover on absolute positioned elements in Chrome, but as I've understood, those occur only on elements with z-index, maybe I'm mistaken. Anyhow, here's the box code, I could really use some help figuring this one out, as I'm not able to pinpoint the problem Chrome is having.
HTML:
<div class="image-wrap">
<div class="image">
<img src="img/unyield.jpg" class="image-front">
<div class="image-caption">
<span class="caption-content">Unyielding sense</span><br/>
<span class="caption-one">cover artwork</span><br/>
<span class="read-more">INFO</div>
<div class="image-side"></div>
</div>
</div>
CSS BOX:
.image-wrap {
position: absolute;
top: 50%;
left: 5%;
margin-top: -225px;
width: 360px;
height: 550px;
perspective: 1000px;
-ms-perspective: 1000px;
-moz-perspective: 1000px;
-webkit-perspective: 1000px;
-o-perspective: 1000px;
}
.image {
position: absolute;
width: 360px;
height: 550px;
transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform: translateZ(-130px);
-ms-transform: translateZ(-130px);
-moz-transform: translateZ(-130px);
-webkit-transform: translateZ(-130px);
-o-transform: translateZ(-130px);
transition: all 1s ease;
-ms-transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
}
.image-front, .image-side {
position: absolute;
width: 360px;
height: 550px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.image-front {
transform: translateZ(180px);
-ms-transform: translateZ(180px);
-moz-transform: translateZ(180px);
-webkit-transform: translateZ(180px);
-o-transform: translateZ(180px);
}
.image-side {
transform: rotateY(90deg) translateZ(180px);
-ms-transform: rotateY(90deg) translateZ(180px);
-moz-transform: rotateY(90deg) translateZ(180px);
-webkit-transform: rotateY(90deg) translateZ(180px);
-o-transform: rotateY(90deg) translateZ(180px);
border: 1px solid #B8B5B5;
background-color: green;
}
And the problematic caption CSS:
.image-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
opacity: 0;
background-color: black;
color: white;
text-align: center;
padding-top: 25px;
transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.image:hover .image-caption{
opacity: 0.8;
}
this is giving problems px use deg
.image-front {
transform: translateZ(180px);
-ms-transform: translateZ(180px);
-moz-transform: translateZ(180px);
-webkit-transform: translateZ(180px);
-o-transform: translateZ(180px);
}
see
stackoverflow.com/questions/hardware-acceleration-in-css3
and css-performance-relative-to-translatez0
I am using the following CSS to make a flipping transition with CSS3:
/* simple */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
border: 1px solid #fff;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 160px;
height: 160px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
text-align: center;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(logo.png) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
}
Implementation of the CSS is as follows:
<div class="sidepanel" id="troll">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<a href="../articlenew/troll.php?id=<?php echo rand(1,$maxnum);?>"><div class="front" >
<span style="font-size: 26px; color:#333;">The Best Thing in this World is</span><br />
<strong style="font-size: 40px; color:red;">SE...</strong></div></a>
<a href="../articlenew/troll.php?id=<?php echo rand(1,$maxnum);?>"><div class="back" style="text-align:center; color:#333;">
<!-- back content -->
<span style="font-size: 30px">Secrets!</span>
<img src="../trial/youmad.png" width="70" height="70" /><br />
<span style="font-size: 20px">You Mad?</span><br />
<span style="font-size: 16px">Best College Trolls</span> </div></a>
</div>
</div>
THe problem is that in some browsers it works fine, in some, i see the front text as well as the back text reversed, like when one sees a text in mirror. I have no clue where its messing up. I did gave browser version and compatibility a thought but i think HTML5 and CSS3 are enough popular now and all browsers support them. I am also sharing some images to explain:
Use this code it will solve your problem
css
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective:1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
/* for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: for IE */
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
top: 0;
left: 0;
width: 180px;
height: 180px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background-position: center center;
z-index: 2;
background:green;
}
.back {
background: #f2f2f2;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(-180deg);
}
Demo on Jsfiddle
I.E doesn't support backface-visibility
About Chrome, check here
I would also try setting backface-visibility hidden and transform-style : preserve-3d to everything (just to check)