Develop Reference

How can I get all 6 sides of a 3d cube to show in react.js?

So I am creating my website portfolio where I have a 3d cube spinning in the about page that shows languages that I am familiar with and for some reason, there are only 4 sides that show when I want to show all 6 sides. The cube spins as intended but for some reason only 4 of the 6 sides are showing.
my file:
<div className="stage-cube-cont">
<div className="cubespinner">
<div className="face1">
<FontAwesomeIcon icon={faPython} color="#DD0031" />
</div>
<div className="face2">
<FontAwesomeIcon icon={faHtml5} color="#F06529" />
</div>
<div className="face3">
<FontAwesomeIcon icon={faCss3} color="#28A4D9" />
</div>
<div className="face4">
<FontAwesomeIcon icon={faGitAlt} color="#EC4D28" />
</div>
<div className="face5">
<FontAwesomeIcon icon={faJsSquare} color="#dd700" />
</div>
<div className="face6">
<FontAwesomeIcon icon={faReact} color="#5ED4F4" />
</div>
</div>
</div>
The CSS file:
.cubespinner {
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
transform-style: preserve-3d;
transform-origin: 100px 100px 0;
margin-left: calc(50% - 100px);
div {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.4);
text-align: center;
font-size: 100px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px 0px lightyellow;
}
.face1 {
transform: translateZ(100px);
color: #dd0031;
}
.face2 {
transform: rotateY(90deg) translateZ(100px);
color: #f06529;
}
.face3 {
transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
color: #28a4d9;
}
.face4 {
transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
color: #5ed4f4;
}
.face5 {
transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
color: #efd81d;
}
.face6 {
transform: rotateX(-90deg) translateZ(100px);
color: #ec4d28;
}
}
#keyframes spincube {
from,
to {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
transform: rotateY(-90deg);
}
33% {
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
transform: rotateX(90deg);
}
}
Any help is much appreciated!

Your animation works for me on Chrome and Firefox although it gets janky after the 4th face, and different depending on the browser: https://stackblitz.com/edit/react-ts-15jx1h?file=style.scss
If you apply transformations in different orders between keyframes, you leave it up to the browser to interpolate the correct transformation between each keyframe. This can cause some extra spinning in random directions, even though the final state is the same.
To make it consistent I'd suggest copy / pasting the previous keyframe's transformation into the next, and just adding an additional 90 degree turn to each.
#keyframes spincube {
16% {
transform: rotateY(-90deg);
}
33% {
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg);
}
66% {
transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg);
}
83% {
transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg)
rotateZ(90deg);
}
100% {
transform: rotateY(-90deg) rotateZ(90deg) rotateX(-90deg) rotateY(-90deg)
rotateZ(90deg) rotateX(-90deg);
}
}
Fixed version: https://stackblitz.com/edit/react-ts-zbpcx2?file=style.scss

Combine two class div

I am trying to combine two div classes together so it will work. Link : I cant combine this and this I have done this. I am trying to combine those things together,but I can't.How can I do that?The only it works is shake the image,I want both to be together work.I put now the .overlay from link one into the auto style3.
the css code is
img:hover {
animation: shake 0.2s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.auto-style3 {
margin-top: 0px;
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.auto-style4 {
background-color: #FF0000;
}
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
max-width: 300px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.container:hover .overlay {
opacity: 1;
}
and the code that I have in is
<div class="container" >
<img src="avatar.jpg" alt="Avatar" width="278" height="262" class="style3" >
<div class="auto-style3">
Avatar is ON
</div>
</div>

I did a straight copy/paste from both sources, then changed the first line of CSS in the snippet below (img:hover -> .container:hover)
.container:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
#keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
.container:hover .overlay {
opacity: 1;
}
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.fa-user:hover {
color: #eee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<a href="#" class="icon" title="User Profile">
<i class="fa fa-user"></i>
</a>
</div>
</div>

Not able to restart animation

I am trying to restart css animation when contents of div is changed. I have tried all method i can find googling none of them seems to work. I have tried
JQUERY
$("p1").removeClass("content");
$("p1").addClass("content");
JAVASCRIPT
var elm = this,
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
and some other methods like setting display to none and then block or changing animationName
Here is my code
HTML
<div id="content">
<div class="content" id="p1">
<div class="person"></div>
<img src="img/saying.png" class="statusclound"/>
<p class="status"></p>
<img class="frame" src="img/splash_1.png" id="frame_1"/>
</div>
</div>
CSS
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
#keyframes buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0deg);
transform: translateX(1px) rotate(0deg);
}
100% {
-webkit-transform: translateX(-1px) rotate(0deg);
transform: translateX(-1px) rotate(0deg);
}
}
JAVASCRIPT
function test() {
var currentPatch = document.getElementById("p" + patchTurn);
currentPatch.getElementsByClassName("person")[0].style.backgroundImage = "url(http://localhost:80/slingshot/uploads/" + jsonData[3] + ")";
currentPatch.getElementsByClassName("status")[0].innerHTML = jsonData[2];
currentPatch.getElementsByClassName("frame")[0].src = "img/splash_" + randomFrame + ".png";
currentPatch.style.animationName = "buzz-out";
currentPatch.style.display = "block";
}
So when the page loads div is disabled and test() function runs and div animates but when i change some content inside that div and re-run test() function it doesn't animate.

I'm not too clear on what part you need help with so I've made a working JSfiddle that shows all of it working.
I created an event listener for changes in the div and adds the class "content-active" to the div. This class adds the animation name and sets the display to block. Then the class is removed and re-added to restart the animation. To get the animation to restart, I set a 10ms delay. (You can also clone the div if you'd like)
https://jsfiddle.net/heraldo/zyjuoLt1/
JS:
// watch for changes in the DOM
$('#content').bind("DOMSubtreeModified",function(){
// clear any previous animation
$("#p1").removeClass("content-active");
// setting a timeout allows the animation to restart
// NOTE, you can also clone the element and re-add it to do
// the same thing.
setTimeout(function(){ $("#p1").addClass("content-active"); }, 10);
});
// simply adds text to the status <p>
$('#modify').click(function(){
$(".person").append('text ');
});
CSS:
#content {
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
.content-active{
display: block;
animation-name: buzzOut;
}
#keyframes buzzOut {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0deg);
transform: translateX(1px) rotate(0deg);
}
100% {
-webkit-transform: translateX(-1px) rotate(0deg);
transform: translateX(-1px) rotate(0deg);
}
}
HTML:
<!-- simply adds text to the div -->
<button id="modify">Add Text</button>
<div id="content">
<div class="content" id="p1">
<div class="person"></div>
<p class="status"></p>
</div>
</div>
Let me know if this works for you!

Bouncing arrow css - does not work?

I'm trying to do a mixture of three different things. A menu that appears half way down a screen after scrolling, a bouncing arrow and a side menu that opens once clicked.
This is an example page with all of these "attempts" are being made: http://www.new.techmoney360.com/youll-never-look-at-an-rpg-the-same-again/
(it is made in wordpress btw)
If you scroll half way down, you will see the menu appear on the left.
There are tons of issues with this I can see, but I will fix them as I go. Currently the one that is driving me nuts is a bouncing arrow.
This is what I am trying to replicate: https://codepen.io/dodozhang21/pen/siKtp
The arrow does not bounce, and I am not sure why? I got a new image for the arrow to the left, positioned it correctly and such. Can anyone give me some advice?
Here is the code for what I have done trying to implement this:
html:
<div id="sliderr" >
<div class="arrow bounce">
</div>
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">Explore More</span>
</div>
css (regarding the bouncing arrow):
#import "compass/css3";
#include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {
#include transform(translateY(0));
}
40% {
#include transform(translateY(-30px));
}
60% {
#include transform(translateY(-15px));
}
}
.arrow {
position: fixed;
bottom: 40%;
left: 0;
margin-left:-20px;
width: 40px;
height: 40px;
background-image: url("http://www.new.techmoney360.com/wp-content/uploads/2016/06/left-arrow-a.png");
background-size: contain;
}
.bounce {
#include animation(bounce 2s infinite);
}
css with apearing menu:
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#sliderr {
position:fixed;
top: 100px;
left: 0px;
height: 300px;
width: 130px;
background: #FFF;
margin-left: -200px;
z-index:9;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

More than likely your issue is that you are using the CSS from the example codepen link as is but you are not using the same kind of preprocessor for your CSS. Give this a try change your .bouncs and #keyframes css to the following:
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
If it works now then you are not using SASS or SCSS or any kind of CSS preprocessor. To see the css you need to use make sure to press the "View Compiled" button at the top right of the css window on codepen. It will spit out CSS you can use wihtout passing it through a compiler. Also note that this css includes vendor prefixes so it works cross browser.

Animate.CSS Transition not working in Mozila Firefox

Trying to Slide only h3 (not whole slider) bounceInLeft using Animate.CSS but it's working only Chrome,opera but not working on Firefox browser.
See this Fiddle > on Chrome, then Firefox.
CSS:
/******************
* Bounce in Left *
*******************/
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-1000px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-1000px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-1000px);
}
80% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
#-o-keyframes bounceInLeft {
0% {
opacity: 0;
-o-transform: translateX(-1000px);
}
80% {
-o-transform: translateX(-10px);
}
100% {
-o-transform: translateX(0);
}
}
.animated.bounceInLeft {
-webkit-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-o-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
/****************
* bounceInRight *
****************/
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(1000px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(1000px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(1000px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
#-o-keyframes bounceInRight {
0% {
opacity: 0;
-o-transform: translateX(1000px);
}
80% {
-o-transform: translateX(10px);
}
100% {
-o-transform: translateX(0);
}
}
.animated.bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-o-animation-name: bounceInRight;
animation-name: bounceInRight;
}
/* Description */
#headslide p {
-webkit-animation-name:bounceInRight;
-moz-animation-name:bounceInRight;
-o-animation-name:bounceInRight;
animation-name:bounceInRight;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;
box-shadow:0 1px 4px rgba(0,0,0,0.1);
-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-moz-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-o-box-shadow:0 1px 4px rgba(0,0,0,0.1);
-ms-box-shadow:0 1px 4px rgba(0,0,0,0.1);
margin:0;
}
/* Title */
#headslide h3 {
-webkit-animation-name:bounceInLeft;
-moz-animation-name:bounceInLeft;
-o-animation-name:bounceInLeft;
animation-name:bounceInLeft;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-moz-animation-fill-mode:both;
animation-fill-mode:both;
background: #fff;
font-size: 110%;
line-height: 1.4;
padding: 1% 2%;
margin: 0;
font-weight:normal;
text-transform:uppercase;
}
This Slider has a fade transition by default, so it shows fade transitions on Firefox and my bounceInLeft/bounceInRight keyframes only work on Chrome and Opera.
I'm only trying to slide h3, and not the entire Slider.
Why does Animate.css not work on Firefox? How can I fix this? Is it possible to fix this using jQuery? Thanks.