I have two side front and back. By default front is displayed, when I hover over it it display the back(ie the other side). The problem is that it returns to front by itself, what i wanted to do is unless I hover over it I want the back side to remain as it is.(Rotate back fort on hover)
Here is a live example:
$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
#keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(90deg); }
}
.spin-cube {
animation: spin 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>
This solves the problem
$(".cube").mouseover(function(){
if($(".cube").hasClass("spin-cube-front")){
$(".cube").addClass('spin-cube-back');
$(".cube").removeClass('spin-cube-front');
}else{
$(".cube").removeClass('spin-cube-back');
$(".cube").addClass('spin-cube-front');
}
});
$(document).ready(function(){
$(".cube").mouseover(function(){
$(".cube").addClass('spin-cube');
});
$(".cube").mouseout(function(){
$(".cube").removeClass('spin-cube');
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: transform 1s ease;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}
This would be more easily done using a transition instead of an animation. Here is an example:
$(document).ready(function(){
var isClassy = false;
var cooldown = false;
$(".cube").mouseover(function(){
if (cooldown) return;
if (!isClassy) {
$(".cube").addClass('spin-cube');
isClassy = true;
} else {
$(".cube").removeClass('spin-cube');
isClassy = false;
}
cooldown = true;
setTimeout(function() {cooldown = false;}, 500);
});
});
.wrap {
width: 100%;
height: 300px;
padding-top:50px;
clear: both;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
margin: 0 auto;
transition: all 1s ease;
transform: rotateY(0deg);
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background-color: #FFC250;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
background-color: #360;
z-index: 1000;
transform: translateZ(100px);
}
.spin-cube {
transform: rotateY(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="left">left</div>
</div>
</div>
Related
I took this Pen: https://codepen.io/golle404/pen/BoqrEN and wanted to make it move every few seconds.
I tried this:
setTimeout(function() {
document.getElementById("move").style.transform = "rotateY(203deg)";
}, 2000);
but this moves the object once and I want to make the cube spin infinite with 3 stops.
So like the cube rotates to 203deg and should stay there for 2 seconds and move to 180deg for example - in a infinite loop.
Is there a way to do it ? Or is it not possible.
You can use a keyframe animation for this.
For example:
#keyframes rotation {
0%, 100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
And then you use it like this
.my-element {
animation: rotation 5s infinite;
}
Here it is in combination with your code from the codepen:
.container {
margin-top: 150px;
}
.news-grid {
width: 300px;
margin: auto;
}
.news-card {
width: 300px;
height: 300px;
perspective: 800px;
perspective-origin: 50% 50%;
outline: 1px solid blue;
}
.face>img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#experiment {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 200px;
perspective: 800px;
perspective-origin: 50% 200px;
}
.cube {
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(245deg);
animation: rotation 5s infinite;
}
.face {
position: absolute;
height: 260px;
width: 260px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
#keyframes rotation {
0%,
100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
<div class="container">
<div class="news-grid">
<div class="news-card">
<div class="cube">
<div class="face one"></div>
<div class="face two">
<img src="http://images.sixrevisions.com/2010/10/13-01_information_architecture_101_ld_img.jpg" alt="" /></div>
<div class="face three">
Information Architecture 101: Techniques and Best Practices
</div>
</div>
</div>
</div>
</div>
You need to use setInterval, not setTimeout
This is my Preloader Code for my Website
<style>
#site {
opacity: 0;
-webkit-transition: all 2s ease;
transition: all 2s ease;
}
#preloader {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
#preloader:before {
content: "";
display: block;
position: absolute;
left: -1px;
top: -1px;
height: 100%;
width: 100%;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
border: 0px solid white;
border-top: 1px solid transparent;
border-radius: 100%;
}
#preloader > .icon {
position: absolute;
/*top: 50%;
left: 50%;*/
height: 60px;
width: 60px;
/*margin-top: -12.5px;
margin-left: -5.3px;*/
-webkit-animation: 1s ease-in-out infinite alternate;
animation: 1s ease-in-out infinite alternate;
}
#media only screen and (min-width: 768px) {
#preloader {
height: 80px;
width: 80px;
margin-left: -30px;
}
#preloader:before {
left: -2px;
top: -2px;
border-top-width: 2px;
border-left-width: 2px;
border-bottom-width: 2px;
border-right-width: 2px;
}
#preloader > .icon {
height: 80px;
width: 80px;
/*margin-top: -18.75px;
margin-left: -7.95px;*/
}
}
#media only screen and (min-width: 1200px) {
#preloader {
height: 100px;
width: 100px;
margin-top: -40px;
margin-left: -40px;
}
#preloader > .icon {
height: 100px;
width: 100px;
/*margin-top: -25px;
margin-left: -10.6px;*/
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#-webkit-keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<div id="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar"><img class="icon" src="URL OF GIF">
</div>
<main id="site" role="main"></main>
<script type="text/javascript">
(function(){
var preload = document.getElementById("preloader");
var loading = 0;
var id = setInterval(frame, 64);
function frame(){
if(loading == 100){
clearInterval(id);
//window.open('welcome.html', '_self');
} else {
loading = loading + 1;
if(loading == 90){
preload.style.opacity = "0";
}
}
}
})();
/*(function preloader() {
var preloader = document.getElementById("#preloader");
preloader.style.opacity = "0";
preloader.setAttribute("aria-busy", "false");
document.getElementById("#site").style.opacity = "1";
})
window.onload = preloader;*/
</script>
Right now I have a White Background, I would like the Background to be Pure Black. I have tried a few things but nothing seems to work.
I am loading the GIF from a URL.
I know that the color code for Black is #000000 and I have tried entering it instead of the opacity = 0; but nothing seems to work.
Any advice ?
Add this style
html {
height: 100%;
background-color: black;
}
html , body{ height: 100%;}
html {background-color: black;}
I want to create slide effect on my div but slideOut animation not executing.
var a = document.getElementById('box1');
function slide(){
if(a.className == 'newBox'){
a.style.animationName = 'slideOut';
//console.log(a.style.animationName);
} else {
a.setAttribute('class','newBox');
}
}
.box, .newBox {
width: 300px;
height: 200px;
text-align: center;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.newBox:after {
content: "";
position: absolute;
background-color: rgba(0,0,0,0.1);
top: 0;
left: 0;
width: 100%;
height: 100%;
animation-name: slideIn;
animation-duration: 1s;
animation-iteration-count: 1;
}
#keyframes slideIn {
0% {
transform: translate(100%,0);
}
100% {
transform: translate(0,0);
}
}
#keyframes slideOut {
0% {
transform: translate(0%,0);
}
100% {
transform: translate(100%,0);
}
}
<div id="box1" class="box" onmouseover="slide()" onmouseleave="slide()"></div>
There's no need for JS / jQuery or animation while you can do it with transition:
.box {
width: 300px;
height: 200px;
text-align: center;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
transition: 1s;
background-color: rgba(0,0,0,0.1);
}
.box:hover:after {
width: 100%;
}
<div id="box1" class="box"></div>
you are not defining the 100% case in the css slideOut properties
here:
#keyframes slideOut {
0% {
transform : translate(0%,0) ;
}
I have a page flipper animation for a notebook styled divs:
http://jsfiddle.net/jdell64/c1ytu8mo/2/
$('#next').click(function () {
$('#card').toggleClass('flipped');
})
.container {
background: lightgray;
width: 500px;
height:500px;
margin: 0 auto;
perspective: 800px;
}
#card {
width: 50%;
height: 100%;
margin: 0 auto;
transform-style: preserve-3d;
}
#card > div {
position:absolute;
width:100%;
height: 50%;
background: rgba(255, 255, 255, 0.7);
top: 125px;
/* backface-visibility: hidden; */
transition: transform 1s, visibility 0.9s;
transform-origin: 50% 0%;
}
#card.flipped .front {
transform: rotateX(360deg);
transform-origin: 50% 0%;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="card">
<div class="back">Back</div>
<div id="mid" class="mid">Middle</div>
<div id="front" class="front">Front</div>
</div>
</section>
<br/>
<br/>
<br/>
<br/>
<a id="back" href="#">back</a>
<a id="next" href="#">next</a>
The 'next' button seems to work, but it toggles the page back and forth. How would I get it to go 'next' in an endless loop, and have the previous page do the same?
Also, as an aside... I am not sure why my 'front' content has to be at the bottom.
More info
Based off of this article, I can do this:
$('#next').click(function () {
myBox = $('#card')
myBox.toggleClass('flipped');
myBox.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function (e) {
console.log('done!');
console.log(e);
// code to execute after transition ends
});
})
but it fires twice for some reason.
Update I got the 'next' button to work, but I can't figure out the back button:
http://jsfiddle.net/jdell64/u3aebu1L/5/
You simply toggle the flipped class, adding / removing would create a forth and back notion, but if you want to flip more elements, then the flipped class should stay on the card, but instead should go to the sub elements.
To answer your aside: z-index will solve reordering issues... otherwise the sub elements will simply be put over each other, thus the last one being on top.
$('#next').click(function () {
$('#card').addClass('flipped');
});
$('#back').click(function () {
$('#card').removeClass('flipped');
});
.container {
background: lightgray;
width: 500px;
height:500px;
margin: 0 auto;
perspective: 800px;
}
#card {
width: 50%;
height: 100%;
margin: 0 auto;
transform-style: preserve-3d;
}
#card > div {
position:absolute;
width:100%;
height: 50%;
background: rgba(255, 255, 255, 0.7);
top: 125px;
/* backface-visibility: hidden; */
transition: transform 1s, visibility 0.9s;
transform-origin: 50% 0%;
}
#card.flipped .front {
transform: rotateX(360deg);
transform-origin: 50% 0%;
visibility: hidden;
}
#card .front {
z-index: 2;
}
#card .mid {
z-index: 1;
}
#card div {
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="card">
<div id="front" class="front">Front</div>
<div id="mid" class="mid">Middle</div>
<div class="back">Back</div>
</div>
</section>
<br/>
<br/>
<br/>
<br/>
<a id="back" href="#">back</a>
<a id="next" href="#">next</a>
You should also switch the front class to the next page so the animation will always be the same because off that 'front' class
This is future you... I found a hacky solution:
http://jsfiddle.net/jdell64/u3aebu1L/
Basically, I added a .middle class to be for the other direction animation. I also added a noAnimate class to ignore animations.
.container {
background: lightgray;
width: 500px;
height:500px;
margin: 0 auto;
perspective: 800px;
}
#card {
width: 50%;
height: 100%;
margin: 0 auto;
transform-style: preserve-3d;
}
#card > div {
position:absolute;
width:100%;
height: 50%;
//background: rgba(255, 255, 255, 0.6);
top: 125px;
transform-origin: 50% 0%;
}
#card .front {
transition: transform 1s, visibility 0.9s;
}
#card .middle {
transition: visibility 0.1s, transform 1s;
}
#card.flipped .front {
transform: rotateX(360deg);
transform-origin: 50% 0%;
visibility: hidden;
}
#card.flopped .middle {
transform: rotateX(-360deg);
transform-origin: 50% 0%;
}
.noAnimate {
-moz-transition-property: none !important;
-webkit-transition-property: none !important;
-o-transition-property: none !important;
transition-property: none !important;
}
.front {
background: lightgreen;
}
.middle {
background: lightblue;
}
.back {
background: goldenrod;
}
Can you guys tell me how to make the hallo text to centre inside the circle?
The circle is not currently working the way it should in IE8 and Firefox.
Does anyone have any ideas / suggestions that could fix this?
I have provided a fiddle
Here is my code below (It is all in my Fiddle above)
CSS
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}
HTML
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
hallo
</div>
Any help would be great!
To centre your text, use text-align:center for horizontal alignment, and set line-height:300px (with 300px being equal to the element's height) for vertical alignment.
Check this fiddle, I've placed a wrapper div
HTML
<div class="wrapper">
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
</div>
<div class="text">hallo<div>
</div>
CSS
body {
margin: 50px;
}
.wrapper {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.text {
position: absolute;
top:0px;
width: 300px;
height: 300px;
margin: 0 auto;
z-index:10;
text-align:center;
line-height:300px;
}
.spinner {
position: absolute;
width: 300px;
height: 300px;
background: #aaa;
}
.spinner:after {
position: absolute;
content: "";
width: 80%;
height: 80%;
border-radius: 100%;
background: #fff;
top: 10%;
left: 10%;
}
.spinner span em {
background: #0e728e;
-webkit-animation-duration: 3s;
}
/* No need to edit below this line */
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
.spinner {
border-radius: 100%;
position: relative;
}
.spinner span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner span:first-child {
left: 0;
}
.spinner span:last-child {
left: 50%;
}
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}