Develop Reference

Why would this jQuery flip function bug with an image?

This jsFiddle is taken from what I am building, on jsFiddle it works without issue. The function flips the card - no problem. However, when running it on my local host the card sometimes (often the first time a card is flipped but then not thereafter) disappears for a few seconds before reappearing. I think this may be related to the fact that there is an image on the front of the card, as this does not disappear. Is there any bug visible in my code, or is there a work around for problems like this perhaps?
The CSS is extensive but I wanted to copy it in exactly as is in case the source of the problem lies therein.
$(function() {
$('.card-container').on("click", function() {
$(this).find('.card').toggleClass("flipped");
});
});
.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: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 290px;
color: grey;
text-align: center;
font-weight: bold;
font-size: 24px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
border-radius: 2px;
background: url(../../public/images/card.png) no-repeat;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.card .back {
border-radius: 2px;
background: url(../../public/images/card.png) no-repeat;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.reviewflag {
max-height: 35px;
padding-top: 1px;
padding-bottom: 1px;
position: fixed;
margin-left: 48%;
margin-top: 20px;
opacity: 0.7;
left: 0;
display: inline-block;
}
.carddissappears {
display: none;
}
.language {
margin-left: 80%;
}
.cardword {
font-size: 20px;
margin-top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-container">
<div class="card">
<div class="front" style="background-color: blue;">
<img class="reviewflag" src="https://cdn.countryflags.com/thumbs/spain/flag-button-round-250.png">
<p class="cardword">Hola</p>
</div>
<div class="back">
<p class="cardword">Bonjour</p>
</div>
</div>
</div>

Scale down a border-radius div element and keep in same position, egg shape

I have a div element in the shape of an egg and rotated 140 degrees.
HTML:
<div id="egg-container">
<div id="egg-blue" class="egg egg-large"></div>
</div>
CSS:
#egg-container {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
border: 1px solid red;
margin: 0 auto;
}
.egg {
position: absolute;
background-image: radial-gradient(#00F9AF, #0054FD 70%);
box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
height: 10px;
width: 10px;
top: 75px;
}
#egg-blue {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(140deg);
opacity: 0.8;
}
.egg-lg {
top: 25px;
right: -25px;
height: 160px;
width: 140px;
}
.egg-md {
/* How to scale down correctly? */
}
.egg-sm {
/* How to scale down correctly? */
}
.egg-xs {
/* How to scale down correctly? */
}
My goal is to leverage JavaScript to simply switch classes between large, medium, small and extra small. I know how to employ toggling classes.
But I'm having trouble connecting the dots on styling this correctly when classes change between -lg, -md, -sm, -xs. It looks too snappy, choppy, etc.
Another way to imagine this outside of code is a flower blooming. When I toggle the class with JavaScript, that's essentially what I am trying to accomplish. Do note, the red circle styling is there to act as a visual center.
I want that egg that you see illustrated to maintain its aspect ratio AND its rotation. Simply scale the element bigger or smaller, depending on the applied class selector.
I figure the root of my problem at the moment is that I am hard-coding pixel widths and heights.
If you have any ideas, please chime in.
Here is the fiddle: https://jsfiddle.net/excqrun0/12/
Thank you.

you can use transform : scale(0.5); to scale down the element : https://www.w3schools.com/css/css3_2dtransforms.asp
and you can add it to your previous transform like transform: rotate(140deg) scale(1); , move the width and height and other stuff to the id egg-blue and fill the classes with the new transform , and use javascript to switch between the classes :
var egg = document.getElementById('egg-blue');
document.getElementById('big').addEventListener('click', function(){
egg.classList.add("egg-large");
egg.classList.remove("egg-medium");
egg.classList.remove("egg-small");
});
document.getElementById('medium').addEventListener('click', function(){
egg.classList.add("egg-medium");
egg.classList.remove("egg-large");
egg.classList.remove("egg-small");
});
document.getElementById('small').addEventListener('click', function(){
egg.classList.add("egg-small");
egg.classList.remove("egg-large");
egg.classList.remove("egg-medium");
});
#egg-container {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
border: 1px solid red;
margin: 0 auto;
}
.egg {
position: absolute;
background-image: radial-gradient(#00F9AF, #0054FD 70%);
box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
height: 10px;
width: 10px;
top: 75px;
}
#egg-blue {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
opacity: 0.8;
top: 25px;
right: -25px;
height: 160px;
width: 140px;
}
.egg-large {
transform: rotate(140deg) scale(1);
}
.egg-medium {
transform: rotate(140deg) scale(0.7);
}
.egg-small {
transform: rotate(140deg) scale(0.4);
}
#buttons{
position: absolute;
bottom: 0;
}
<div id="egg-container">
<div id="egg-blue" class="egg egg-large"></div>
</div>
<div id="buttons">
<button id="big"> BIG </button>
<button id="medium"> MEDium </button>
<button id="small"> small </button>
</div>

Extent flip card function - Jquery

Currently I am facing the problem that each button triggers both cards to flip. However, I am aiming for each button to flip only the appropriate card (not both of them). Is it possible to extent this jquery function on as many cards as I want?
I hope my problem becomes clear when looking at the code snippet.
Any hints are highly appreciated.
Regards
.wrappercard {
width: 285px;
height: 350px;
margin-top: 50px;
margin-left: 50px;
}
.containercard {
height: 330px;
width: 285px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
/* Front Styling */
.card .front {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
}
/*Back Styling*/
.card .back {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
overflow: hidden;
}
/*Button flip*/
.btnflip {
border: none;
background: none;
margin-left: 50%;
transform: translate(-50%);
width: 100%;
margin-top: 10px;
font-size: 14px;
font-weight: lighter;
cursor: pointer;
padding: 3px 20px 3px 20px;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.20);
border-radius: 4px;
transition: 0.3s ease-in-out;
}
.btnflip:hover {
background-color: white;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.80);
transition: 0.3s ease-in-out;
}
.btnflip:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip" onclick="flip()">Anfragen</button>
</div>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip" onclick="flip()">Anfragen</button>
</div>
<script>
function flip() {
$('.card').toggleClass('flipped');
}
</script>

If you add the event handler via jquery then you get this, which is the button clicked.
<button class="btnflip">Anfragen</button>
then you can use relative path traversal to find the related card:
$(function() {
$(".btnflip").click(function() {
$(this).closest(".wrappercard").find('.card').toggleClass('flipped');
})
});
$(function() {
$(".btnflip").click(function() {
$(this).closest(".wrappercard").find('.card').toggleClass('flipped');
})
});
.wrappercard {
width: 285px;
height: 350px;
margin-top: 50px;
margin-left: 50px;
}
.containercard {
height: 330px;
width: 285px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.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: 50% 50%;
}
.card div {
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
/* Front Styling */
.card .front {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
}
/*Back Styling*/
.card .back {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
overflow: hidden;
}
/*Button flip*/
.btnflip {
border: none;
background: none;
margin-left: 50%;
transform: translate(-50%);
width: 100%;
margin-top: 10px;
font-size: 14px;
font-weight: lighter;
cursor: pointer;
padding: 3px 20px 3px 20px;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.20);
border-radius: 4px;
transition: 0.3s ease-in-out;
}
.btnflip:hover {
background-color: white;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.80);
transition: 0.3s ease-in-out;
}
.btnflip:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip">Anfragen</button>
</div>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip">Anfragen</button>
</div>

CSS animation reset transform

I have a CSS clock, the minute hand has the following animation styling:
animation: a36016 3600s normal infinite steps(3600,end);
This allows it to move along as the minutes go by.
When I load the page the minutes hand has a rotation set like this:
transform:rotate(180deg);
Using setInterval I am trying to reSync it. So for example after 10 minutes if I get the rotation for example as 210deg, and then I change it like this:
$('#clock .mm').css( {'transform': 'rotate(210deg)'});
The problem is that it doesn't actually set the degrees to 210, for some reason it adds to whatever amount of degrees the animation has already moved. So it becomes 210deg plus whatever amount it has already moved.
Can someone tell me how I can adjust the animation styling so this doesnt happen, if change the rotation usig javascript to whatever it is, it should set it to that regardless of how many degrees it has already moved.
Thanks
* BELOW IS THE FULL CODE *
PHP
<?php
date_default_timezone_set("Europe/London");
$hour = date("g");
$minutes = date("i");
$seconds = date("s");
if ($hour>=12){
$hour=0;
}
$hourinseconds = ($hour*3600)+($minutes*60)+$seconds;
$minutesinseconds = ($minutes*60)+$seconds;
$hour_degree = ($hourinseconds/43200)*360;
$minutes_hand = ($minutesinseconds/3600)*360;
$seconds_hand = ($seconds/60)*360;
?>
HTML, CSS and jQuery
$(document).ready(function(){
function SyncTime(){
$.getJSON('ajax.php', function(data) {
$('#clock .hh').css( {'transform': 'rotate('+data.hour+'deg)'});
$('#clock .mm').css( {'transform': 'rotate('+data.min+'deg)'});
});
}
setInterval(SyncTime,5000);
});
body {
overflow: hidden;
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
/*** Font for numbers ***/
#font-face {
font-family: 'WallClock';
src: url('fonts/wallclock.eot');
}
#font-face {
font-family: 'WallClock';
src: url('fonts/wallclock.woff') format('woff'), url('fonts/wallclock.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'WallClockPS';
src: url('fonts/wallclock.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
/*** Clock rules. Pure CSS ***/
#clock {
transition: all 0.5s ease;
}
#a {
width: 100em;
height: 100em;
position: relative;
border-radius: 50em;
background: #eee;
box-shadow: inset 0.5em -0.5em 0 #ccc, inset 1.7em -1.7em 0 #555, inset -0.3em -0.4em 0 #999, inset -0.3em 0.2em 0 #ccc, inset -1em -1em 0 #555, 1em 3em 2em rgba(0, 0, 0, 0.3);
}
#b {
width: 94em;
height: 94em;
top: 3em;
left: 3em;
position: relative;
border-radius: 47em;
background: #fff;
box-shadow: inset 0.4em 0 0 #fff, inset 0 -0.6em 0 #ddd, inset 1.6em -0.8em 0 #222, inset -1.6em 0.8em 0 #222, inset 2em 2em 0 #222, 0.6em -0.3em 0 #999, -1em 1em 0 #777, -1.3em -2em 0 #fff, 1.3em 2em 0 #222, 1.3em 3em 0 #999;
}
#c {
width: 89em;
height: 89em;
top: 2.5em;
left: 2.5em;
position: relative;
border-radius: 44.5em;
background: #f4f5f6;
box-shadow: inset 0.5em 1em 0.5em rgba(0, 0, 0, 0.4), inset 1em 2em 2em rgba(0, 0, 0, 0.3), inset 0 0.5em 3em rgba(0, 0, 0, 0.1), -1.6em 0.8em 0 #444, 1.6em -0.8em 0 #444;
}
#d {
width: 88em;
height: 88em;
top: 0.5em;
left: 0.5em;
position: relative;
border-radius: 44em;
}
#e {
width: 81.8em;
height: 81.8em;
padding-top: 40.9em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
left: 2.9em;
top: 2.9em;
position: absolute;
border: solid 0.4em #777;
border-radius: 40.9em;
}
#ii {
padding-left: 43.4em;
position: absolute;
}
b,
i {
height: 82em;
position: absolute;
border: solid 0 #222;
border-width: 3em 0;
display: block;
}
b {
width: 1.2em;
}
i {
width: 0.2em;
}
b>i,
i>i {
transform: rotate(6deg);
margin-top: -3em;
}
b>b {
transform: rotate(30deg);
margin-top: -3em;
}
b>i {
left: 0.3em;
}
#f,
#g {
font: 12em/1.0em WallClock, sans-serif;
text-align: center;
width: 6.8em;
color: #222;
}
#g>u>u {
letter-spacing: 0.1em;
}
#g>u>u>u {
letter-spacing: 0;
}
u {
display: block;
line-height: 1em;
text-decoration: none;
}
u>u>u>u {
margin: 0.5em -0.55em;
padding: 0 0.05em;
}
u>u>u {
margin: 0.0em -1.75em;
padding: 0 0.7em;
}
u>u {
margin: -0.55em 0;
text-align: right;
padding: 0 1.65em;
}
#f {
margin-top: -3.37em;
}
#g {
margin-top: -6em;
}
#g u>u {
text-align: left;
}
#q {
font: 2.2em/1em Segoe UI, Helvetica, sans-serif;
text-align: center;
margin-top: -11.5em;
color: #555;
}
.ss,
.mm,
.hh {
width: 80em;
height: 80em;
top: 4em;
left: 4em;
position: absolute;
}
.hh {
transform: rotate(-55deg);
}
.mm {
transform: rotate(60deg);
}
.ss {
animation: tick 1s normal infinite steps(25, end);
}
#keyframes tick {
0% {
transform: rotate(0deg);
}
12% {
transform: rotate(6deg);
}
100% {
transform: rotate(6deg);
}
}
.s {
width: 1em;
height: 48em;
top: 6em;
left: 39.5em;
position: relative;
background: #a00;
outline: 1px solid transparent;
animation: a360_10 60s normal infinite steps(60, end);
}
.sr {
width: 3em;
height: 3em;
background: #a00;
margin: -9.5em 0 0 38.4em;
border-radius: 1.5em;
}
#keyframes a360_10 {
0% {
transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
}
100% {
transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
}
}
.m {
height: 48em;
left: 38.9em;
width: 2.2em;
position: relative;
background: #222;
border: 0 0 32em 0;
animation: a36016 3600s normal infinite steps(3600, end);
outline: 1px solid transparent;
}
#keyframes a36016 {
0% {
transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
}
100% {
transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
}
}
.mr {
width: 5em;
height: 5em;
background: #222;
margin: -10.5em 0 0 37.4em;
border-radius: 2.5em;
}
.h {
width: 3em;
height: 34em;
left: 38.5em;
position: relative;
background: #222;
margin-top: 13em;
outline: 1px solid transparent;
animation: a36010 43200s normal infinite steps(43200, end);
}
#sh {
width: 80em;
height: 80em;
top: 2em;
left: 1em;
position: absolute;
}
#sh .s,
#sh .m,
#sh .h,
#sh .mr {
background: #ddd;
xbox-shadow: 0 0 0.5em #ddd, 0 0 0.25em #ddd;
}
#k {
width: 88em;
height: 88em;
position: absolute;
border-radius: 44em;
box-shadow: inset 4.5em 9em 0.5em rgba(250, 252, 253, 0.2);
}
/* Vendor CSS prefixes */
#css3prefixed:checked~#clock {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#css3prefixed:checked~#clock b>i,
#css3prefixed:checked~#clock i>i,
#css3fixed:checked~#clock b>i,
#css3fixed:checked~#clock i>i {
-webkit-transform: rotate(6deg);
}
#css3prefixed:checked~#clock b>b,
#css3fixed:checked~#clock b>b {
-webkit-transform: rotate(30deg);
}
#css3prefixed:checked~#clock .hh,
#css3fixed:checked~#clock .hh {
-webkit-transform: rotate(-55deg);
}
#css3prefixed:checked~#clock .mm,
#css3fixed:checked~#clock .mm {
-webkit-transform: rotate(60deg);
}
#css3prefixed:checked~#clock .ss,
#css3fixed:checked~#clock .ss {
-webkit-animation: tick 1s normal infinite steps(25, end);
}
#-webkit-keyframes tick {
0% {
-webkit-transform: rotate(0deg);
}
12% {
-webkit-transform: rotate(6deg);
}
100% {
-webkit-transform: rotate(6deg);
}
}
#css3prefixed:checked~#clock .s,
#css3fixed:checked~#clock .s {
-webkit-animation: a360_10 60s normal infinite steps(60, end);
}
#-webkit-keyframes a360_10 {
0% {
-webkit-transform: translate(0, 10em) rotate(0deg) translate(0, -10em)
}
100% {
-webkit-transform: translate(0, 10em) rotate(360deg) translate(0, -10em)
}
}
#css3prefixed:checked~#clock .m,
#css3fixed:checked~#clock .m {
-webkit-animation: a36016 3600s normal infinite steps(3600, end);
}
#-webkit-keyframes a36016 {
0% {
-webkit-transform: translate(0, 16em) rotate(0deg) translate(0, -16em);
}
50% {
-webkit-transform: translate(0, 16em) rotate(180deg) translate(0, -16em);
}
100% {
-webkit-transform: translate(0, 16em) rotate(360deg) translate(0, -16em);
}
}
#css3prefixed:checked~#clock .h,
#css3fixed:checked~#clock .hh {
-webkit-animation: a36010 43200s normal infinite steps(43200, end);
}
/* Fixes */
#css3fixed:checked~#clock {
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
}
.fixed {
display: none;
}
/* Following will fix problems with cascaded transformations
are critical in Safari, Mobile Safari, Opera,
non-critical in Chrome and Firefox */
</style><!--[if !IE]>--><style>#css3fixed:checked~#clock .fixed {
display: block;
}
#css3fixed:checked~#clock .pure {
display: none;
}
</style><!-- <![endif]--><style>#css3fixed:checked~#clock b:nth-child(2) {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
#css3fixed:checked~#clock b:nth-child(3) {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
}
#css3fixed:checked~#clock b:nth-child(4) {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#css3fixed:checked~#clock b:nth-child(5) {
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
#css3fixed:checked~#clock b:nth-child(6) {
transform: rotate(150deg);
-webkit-transform: rotate(150deg);
}
#css3fixed:checked~#clock i:nth-child(2) {
transform: rotate(12deg);
-webkit-transform: rotate(12deg);
}
#css3fixed:checked~#clock i:nth-child(3) {
transform: rotate(18deg);
-webkit-transform: rotate(18deg);
}
#css3fixed:checked~#clock i:nth-child(4) {
transform: rotate(24deg);
-webkit-transform: rotate(24deg);
}
/* IE10 fix */
#media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
#css3fixed:checked~#clock i,
#css3fixed:checked~#clock b {
border-left: solid 0px #fff;
border-right: solid 0px #fff;
}
}
/* Opera rotation fix */
#css3fixed:checked~#clock .s {
animation: a360_10of 60s normal infinite steps(60, end);
}
#keyframes a360_10of {
0% {
transform: translate(0, 10em) rotate(0deg) translate(0, -10em);
-o-transform: translate(0, 3.2em) rotate(0deg) translate(0, -3.2em)
}
100% {
transform: translate(0, 10em) rotate(360deg) translate(0, -10em);
-o-transform: translate(0, 3.2em) rotate(360deg) translate(0, -3.2em)
}
}
/* Chrome/Windows antialiasing bug. */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#css3fixed:checked~#clock #f,
#css3fixed:checked~#clock #g {
font: 12em/1em WallClockPS, sans-serif;
}
#css3fixed:checked~#clock #g {
-webkit-transform: translate(0, -0.05em);
}
}
/* Clock size selection */
#clock {
font-size: 5px;
}
#size25percent:checked~#clock {
font-size: 25%
}
#size250px:checked~#clock {
font-size: 2.5px
}
#size500px:checked~#clock {
font-size: 5px
}
#size10em:checked~#clock {
font-size: 0.1em
}
#size25percent:checked~#clock {
font-size: 25%
}
/* Controls */
input {
width: 1em;
position: relative;
valign: top;
}
input[type=checkbox] {
left: 0.2em;
}
input+label {
padding: 0.2em 0.4em 0.3em 1.4em;
margin-left: -1.4em;
border-radius: 0.3em;
transition: background 0.5s;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
}
input:checked+label {
background: #ABD8F2;
}
input,
label {
line-height: 1.8em;
}
label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#clock {
position: absolute;
right: 55%;
top: 50px;
display: block;
}
#clock {
margin-top: 4em;
}
body #clock .hh {
transform: rotate(<?php echo $hour_degree;
?>deg);
}
#clock .mm {
transform: rotate(<?php echo $minutes_hand;
?>deg);
-webkit-transform: rotate(<?php echo $minutes_hand;
?>deg);
-ms-transform: rotate(<?php echo $minutes_hand;
?>deg);
}
#clock .ss {
animation: tick 1s normal infinite steps(25, end);
-webkit-animation: tick 1s normal infinite steps(25, end);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div style="width:700px;;position:absolute;left:748px;top:84px;">Content</div>
<div id="clock" style="margin-top:84px;">
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<div id="sh">
<div class="hh">
<div class="h"></div>
</div>
<div class="mm">
<div class="m"></div>
<div class="mr"></div>
</div>
<div class="ss">
<div class="s"></div>
</div>
</div>
<div id="ii">
<div class="pure">
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i>
<b><i><i><i><i></i></i></i></i></b>
</b>
</b>
</b>
</b>
</b>
</div>
<!-- this is need only to show
bugs-free variant in many browsers -->
<div class="fixed">
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
<b><i></i><i></i><i></i><i></i></b>
</div>
<!-- till here -->
</div>
<div id="e">
<div id="f">
<u>12<u>1<u>2<u>3</u>4</u>5</u></u>
</div>
<div id="g">
<u><u>11<u>10<u>9</u>8</u>7</u>6</u>
</div>
<div id="q"> quartz</div>
</div>
<div class="hh">
<div class="h"></div>
</div>
<div class="mm">
<div class="m"></div>
<div class="mr"></div>
</div>
<div class="ss">
<div class="s"></div>
<div class="sr"></div>
</div>
<div id="k"></div>
</div>
</div>
</div>
</div>
<div id="css3icon"/>

This removes the value of the CSS property entirely, will that help?
// Reset transform
$('#clock .mm').css({'transform': ''});

This issue is not related to changing transform by jQuery or initial value of transform by CSS.
if you have following example:
<!doctype html>
<html lang="en">
<head>
<title></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.a{width: 100px; height:100px; margin: 100px auto; background: #000}
.b{height: 100px; width: 100px;transform:rotate(10deg); background: red;}
</style>
</head>
<body>
<div class="a">
<div class="b">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script>
<script language="javascript">
$('.b').css( {'transform': 'rotate(20deg)'});
</script>
</body>
</html>
You see that it change just 10 degree and even you change $('.b').css( {'transform': 'rotate(10deg)'}); it does not change.
the problem is related to something else or even a logical error.
According to codes that you sent if you change your jQuery to this:
$(document).ready(function(){
function SyncTime(){
$('#clock .hh').css( {'transform': 'rotate(50deg)'});
$('#clock .mm').css( {'transform': 'rotate(50deg)'});
}
setInterval(SyncTime,5000);
});
After 5 seconds it will redirect to a location and never change its position. the calculation time that pass from ajax.php has issue

Flip of the tile

Hi I am implementing the flip of the tile once it is get zoom.
I am unable to add the css to the new class which I am adding in the jquery.
i need some help regarding this. Use Case is once you hover on the tile it will get zoom then I am adding a new class on click of the tile and I am adding css for that but it is not working. initially i need to show the front text, once I clicked on the tile then the front text should get hide and the back text to be visible and vise versa.
This is what I have tried:
HTML:
<div class="boxes">
<div class="box">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>
Css:
.boxes {
-webkit-transform: translateZ(0);
position: relative;
width: 600px;
height: 700px;
top: 0px;
}
.box {
-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;
width: 140px;
height: 140px;
font-family: Helvetica, sans-serif;
text-align: center;
padding: 13px 10px;
margin: 0 5px;
background-color: #fefefe;
background: -moz-linear-gradient(90deg, #eee, #fff, #eee);
background: -webkit-gradient(linear, left top, left bottom, from(#eee),
color-stop(0.5, #fff), to(#eee) );
border: 3px solid #e1e1e1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 15px;
cursor: pointer;
}
.box:hover {
border-color: #e1e1e1;
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), color-stop(0.5, #fff), to(#e1e1e1));
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.flip {
-webkit-transform: rotatex(-180deg)!important;
}
.front {
z-index: 1;
cursor: pointer;
}
.back {
-webkit-transform: rotatex(-180deg);
color: black;
cursor: pointer;
}
JQuery:
$('.box').click(function(e){
alert('hai');
$(this).addClass('flip').mouseleave(function(){
$(this).removeClass('flip');
});
});
Demo Link

look at this code: DEMO
I added some class and change in your html and css:
CSS:
.box-container{
width:166px;
height:172px;
}
.box-container .box.clicked .back{
opacity:1;
}
.box-container .box.clicked .front{
opacity:0;
}
.box-container .box.clicked{
-webkit-transform:scaleY(-1);
}
.face{
transition: all 0.5s linear;
}
JQuery:
$(".box").click(function(){
$(this).toggleClass("clicked");
});

I did some modifications on your JSFiddle, see this fork: http://jsfiddle.net/u3z6Y/6/
Basically what I do is
Applying a class on the wrapper instead of the box to be able to target the flipped versions of front and back:
$('.box').click(function(e){
$('.boxes').toggleClass('flip');
// ..
});
Targeting both the flipped and the non-flipeed version from CSS:
.front {
z-index: 1;
cursor: pointer;
-webkit-transform: rotatex(0deg)!important;
}
.back {
-webkit-transform: rotatex(-180deg);
color: black;
cursor: pointer;
}
.flip .front {
-webkit-transform: rotatex(-180deg)!important;
}
.flip .back {
-webkit-transform: rotatex(0deg)!important;
}