Develop Reference

Animating web images from center to to left and right on click

I want to achieve this result of the trees moving from center to left and right on click.
I was trying this tutorial but it didn't work at all in translating the first tree from center to left.
I am working on the white arrows of the same section to see if its work and added changing the WHO WE ARE title to magenta to see if the function is working and it is but the image isn't moving at all.
<section id="abtus">
<div class=" container position-absolute" style=" left:100px; float: left; z-index: 100;">
<a href="#abtus">
<button onclick="next()"><span class="arrow1"></span></button>
</a>
</div>
<div class="container position-relative">
<div class="row mt-5 ms-5">
<div class="col offset-md-1 col-md-4">
<h3 class="text1 pb-3" id="myP">WHO WE ARE</h3>
<p class="text2 p-1">
We are two sisters who come from a similar
<br>
background of love for everything creative and magical.
</p>
<p class="text2 p-1">
We aim to deliver your stories with interesting
<br>
visually pleasing magic that separates you from the rest!
</p>
<p class="text2 p-1">
To guarantee great quality work and also an added fun
<br>
element to your project.
</p>
</div>
<div class="col col-md-4">
<h3 class="text1 pb-3">THE TEAM</h3>
<div class="row-4 pb-5 position-relative">
<p class="text2 pb-4">We have a rich experience in the market, especially
<br>
in gaming and animation. We work with several tasks
<br>
such as visual development, concept art, character design,
<br>
graphic design, branding, and social media.<br><br>
Yes, We do everything!</p>
</div>
</div>
</div>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute" style="right: 200px;">
<img src="./images/tree1.png" width="800" class="img" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="./images/tree2.png" width="900">
</div>
</div>
<div class="container position-absolute" style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
<!-- TREEES -->
<div class="container position-absolute" style=" width:100vw; height: 100vh; z-index: 1;">
<div class="position-absolute " style="right: 200px;">
<img src="https://imgur.com/9d6S7wK" width="800" class="img tree1" id="img">
</div>
<div class="position-absolute" style=" left:600px;">
<img src="https://imgur.com/VOFz7Hi" width="900">
</div>
</div>
<div class="container position-absolute " style=" text-align: right; left:1250px;z-index: 100;">
<a href="#abtus">
<span class="arrow2"></span>
</a>
</div>
</section>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
CSS
section{
background-color: pink;
height: 100%;
width: 100%;
}
tree1{
position: absolute;
top: 0vh;
left: 0;
content: " ";
background-image: url(https://imgur.com/9d6S7wK");
background-size: 100% 100%;
width: 50%;
height: 50vh;
}
.arrow1{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(45deg);
z-index: 1;
}
.arrow2{
display: grid;
position: absolute;
place-items: center;
place-content: center;
border-left: 6px solid rgb(255, 255, 255);
border-bottom: 6px solid rgb(255, 255, 255);
width: 20px;
height: 20px;
border-radius: 0.2em;
transform: rotate(225deg);
z-index: 1;
}
.img{
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
;}
.img .horizTranslate{
margin-right: 80% !important;
}
.img .horizTranslateReverse{
margin-left: 0% !important;
}
}
JS
const img = document.querySelector("#img");
function next() {
document.getElementById("myP").style.color = "magenta";
img.classList.remove("horizTranslateReverse");
img.classList.add("horizTranslate");
}
function pre() {
document.getElementById("myP").style.color = "black";
img.classList.remove("horizTranslate");
img.classList.add("horizTranslateReverse");
}
I've included the code of this section here and uploaded the trees images. So far I managed to put the section style 100% but it is the parallax element that is driving me crazy.
Could someone please help me in figuring out what is wrong?

How to properly rotate a cube on click?

So what I'm trying is basically rotating a cube by clicking on buttons that are either located right on the cube or floating next to it. For now I keep them floating because I was trying out a lot and it prooved to be easier this way, but placing them on the cube would be no problem at all.
The ACTUAL problem is that not all rotation axes seem to be treated equally. What I mean by that is that if I rotate along X, the Y and Z axes rotate aswell. But if I rotate along Y (or Z), the Z-axis (or Y-axis) rotate BUT the X-axis ALWAYS STAYS THE SAME.
In my code this means that no matter how the cube is rotated, the rotation along the X-axis, triggered by clicking on the red squares "3" or "4" will always rotate the cube up or down whilst the other buttons rotate the cube according to its position.
Don't mind that the numbers 1,2,5 and 6 get switched. This is just the closest I could get to a solution but rotating the cube randomly for a while will always result in strange movement sooner or later.
My code:
var rotationX = 0;
var rotationY = 0;
var rotationZ = 0;
var rotation = 0;
var translate = 0;
function showDebug() {
var deBugInfo = '<p>X: '+rotationX + '</p>';
deBugInfo += '<p>Y: '+rotationY + '</p>';
deBugInfo += '<p>Z: '+rotationZ + '</p>';
$('#deBug').html(deBugInfo);
}
function cubeRotate() {
$('#cube').css('transform', 'rotateX('+rotationX+'deg) rotateY('+rotationY+'deg) rotateZ('+rotationZ+'deg)');
showDebug();
}
/*
function buttonsRotate() {
$('#buttons').css('transform', 'rotate('+rotation+'deg) translate('+0+')');
showDebug();
}
*/
$(function () {
$('#dir1').on('click', function () {
//var myStyle = $('#cube').css('transform');
//console.log(myStyle);
//rotationY = rotationY - 90;
rotationY -= 90;
cubeRotate();
});
$('#dir2').on('click', function () {
rotationY += 90;
cubeRotate();
});
$('#dir3').on('click', function () {
rotationX -= 90;
cubeRotate();
rotation -= 90;
// buttonsRotate();
});
$('#dir4').on('click', function () {
rotationX += 90;
cubeRotate();
rotation += 90;
// buttonsRotate();
});
$('#dir5').on('click', function () {
rotationZ += 90;
cubeRotate();
});
$('#dir6').on('click', function () {
rotationZ -= 90;
cubeRotate();
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
font-family: sans-serif;
width: 100%;
height: 100%;
position: absolute;
-webkit-perspective: 100vmax;
/* Safari 4-8 */
-webkit-perspective-origin: 50% 50%;
/* Safari 4-8 */
perspective: 100vmax;
perspective-origin: 50% 50%;
overflow: hidden;
}
#cube {
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transition-duration: 0.5s;
}
.cubeface {
position: absolute;
height: 60vmin;
width: 60vmin;
margin-left: -30vmin;
margin-top: -30vmin;
opacity: 0.5;
}
.cubeface:nth-child(1) {
transform: rotateY(0deg) translateY(0px) translateZ(30vmin);
background-color: black;
}
.cubeface:nth-child(2) {
transform: rotateY(90deg) translateY(0px) translateZ(30vmin);
background-color: #343434;
}
.cubeface:nth-child(3) {
transform: rotateY(180deg) translateY(0px) translateZ(30vmin);
background-color: #525252;
}
.cubeface:nth-child(4) {
transform: rotateY(270deg) translateY(0px) translateZ(30vmin);
background-color: #818181;
}
.cubeface:nth-child(5) {
transform: rotateX(90deg) translateZ(30vmin) translateY(0px);
background-color: #a0a0a0;
}
.cubeface:nth-child(6) {
transform: rotateX(-90deg) translateZ(30vmin) translateY(0px);
background-color: #d8d8d8;
}
.content {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background-color: #a7ff8d;
color: #f00;
font-size: 3em;
}
.arrow {
margin: auto;
position: absolute;
left: 50%;
top: 90vmin;
width: 5vmin;
height: 5vmin;
margin-left: -2.5vmin;
margin-top: -2.5vmin;
}
.achse {
height: 2px;
width: 65vmin;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform-origin: 0;
backface-visibility: visible;
transform-style: preserve-3d;
}
.achseY {
background: #0f0;
transform: rotateZ(-90deg) rotateX(45deg);
}
.achseZ {
background: #00f;
transform: rotateY(-90deg) rotateX(45deg);
}
.achseX {
transform: rotateX(45deg);
}
#deBug {
background: #000;
color: #FFF;
font-size: 2em;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
#buttons {
width: 100%;
height: 100%;
z-index: 5;
}
#dir1 {
margin-left: -27.5vmin;
background-color: red;
z-index: 5;
}
#dir2 {
margin-left: -17.5vmin;
background-color: red;
z-index: 5;
}
#dir3 {
margin-left: -7.5vmin;
background-color: red;
z-index: 10;
}
#dir4 {
margin-left: 2.5vmin;
background-color: red;
z-index: 10;
}
#dir5 {
margin-left: 12.5vmin;
background-color: red;
z-index: 5;
}
#dir6 {
margin-left: 22.5vmin;
background-color: red;
z-index: 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="styles/screen.css">
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div id="deBug">
</div>
<div class='arrow' id='dir3'>X-</div>
<div class='arrow' id='dir4'>X+</div>
<div id="buttons">
<div class='arrow' id='dir1'>Y-</div>
<div class='arrow' id='dir2'>Y+</div>
<div class='arrow' id='dir5'>Z+</div>
<div class='arrow' id='dir6'>Z-</div>
</div>
<div id="cube">
<div class="cubeface" id="A">
<div class="content" id="main">
<p>A</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="B">
<div class="content" id="">
<p>B</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir5 up">
</div>
<div class="dir6 down">
</div>
</div>
<div class="cubeface" id="C">
<div class="content" id="">
<p>C</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir4 up">
</div>
<div class="dir3 down">
</div>
</div>
<div class="cubeface" id="D">
<div class="content" id="">
<p>D</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir6 up">
</div>
<div class="dir5 down">
</div>
</div>
<div class="cubeface" id="E">
<div class="content" id="">
<p>E</p>
</div>
<div class="dir6 right">
</div>
<div class="dir5 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="F">
<div class="content" id="">
<p>F</p>
</div>
<div class="dir5 right">
</div>
<div class="dir6 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="achse achseX"></div>
<div class="achse achseY"></div>
<div class="achse achseZ"></div>
</div>
</body>
</html>
I've tried giving every single element the "transform-style: preserve-3d". Didn't work.
I think it could actually better work with the buttons on the cube but that's a question to be answered later and NOT the subject here.
If anyone has an idea how to get ALL AXES TREATED EQUALLY, please tell me, I'm slowly getting mad af with this cube :D
Thank you!
Edits:
2018_04_18:
Also tied to set the tranform origin without success.
2018_04_19:
Updated the snippet so the buttons don't rotate anymore but are fixed so you can always click them.
2018_04_20:
I found two examples from pencode that could be helpful (they both work by dragging the cube with the mouse, I'm not sure if that's got something to do with the problem)...
https://codepen.io/jordizle/pen/haIdo/
This cube has the nice aspect that the sides automatically rotate so that they can be read properly. However if you rotate it to sides 1 or 6, it shows the same problem as my cube does as it simply won't rotate left or right.
https://codepen.io/ge1doot/pen/PqZKbv
In this example the problem seems to be solved. No matter the cube's position you can always spin it in every direction. (I won't need the function to split it however)
My problem is that I can't really see what's the difference between the scrips they use and therefore I don't know why the second one rotates perfectly but I have a feeling this is the right track. If anyone could compare them and solve this mystery it would be really nice ;)

Your problem is caused by something called Euler Order. Basically, it's in what order the axes are used to calculate the final rotation.
The CSS transform Euler Order is the most common one: X, Y, Z.
The X-axis is computed first, so it's always stuck to its resting position. You cannot change the Euler Order in CSS. Even if you could, the first axis of the Euler Order will always be "not treated equally."
Another problem with Euler Rotation is Gimbal Lock. Click X, click Y, and click Z in your demo. Now try rotating X and Z. They're the same! You've just encountered Gimbal Lock, which is super hard to solve and not possible to fix with just CSS.

RELATIVE ROTATION - AXES ROTATE WITH THE CUBE
function rotate(axis, degrees) {
cube.outerHTML = `<div class='gimbal' id='container' style="transition: all 0.5s; transform-style: preserve-3d; transform: rotate${axis}(0deg); position: relative; transition-timing-function: ease-in-out; width: 0; height: 0; transform-origin: 50vw 50vh;">${cube.outerHTML}</div>`;
window.setTimeout(function () {
container.style.transform = `rotate${axis}(${degrees}deg)`;
container.removeAttribute('id');
}, 10);
}
$('#dir1').on('click', function () {
rotate('Y', '90');
});
$('#dir2').on('click', function () {
rotate('Y', '-90');
});
$('#dir3').on('click', function () {
rotate('X', '90');
});
$('#dir4').on('click', function () {
rotate('X', '-90');
});
$('#dir5').on('click', function () {
rotate('Z', '90');
});
$('#dir6').on('click', function () {
rotate('Z', '-90');
});
rotate('X', '0');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-size: 16px;
font-family: sans-serif;
width: 100%;
height: 100%;
-webkit-perspective: 100vmax;
/* Safari 4-8 */
-webkit-perspective-origin: 50% 50%;
/* Safari 4-8 */
perspective: 100vmax;
perspective-origin: 50% 50%;
overflow: hidden;
}
#cube {
margin: auto;
position: absolute;
top: 50vh; left: 50vw;
transform-style: preserve-3d;
}
.cubeface {
position: absolute;
height: 60vmin;
width: 60vmin;
margin-left: -30vmin;
margin-top: -30vmin;
opacity: 0.5;
}
.cubeface:nth-child(1) {
transform: rotateY(0deg) translateY(0px) translateZ(30vmin);
background-color: black;
}
.cubeface:nth-child(2) {
transform: rotateY(90deg) translateY(0px) translateZ(30vmin);
background-color: #343434;
}
.cubeface:nth-child(3) {
transform: rotateY(180deg) translateY(0px) translateZ(30vmin);
background-color: #525252;
}
.cubeface:nth-child(4) {
transform: rotateY(270deg) translateY(0px) translateZ(30vmin);
background-color: #818181;
}
.cubeface:nth-child(5) {
transform: rotateX(90deg) translateZ(30vmin) translateY(0px);
background-color: #a0a0a0;
}
.cubeface:nth-child(6) {
transform: rotateX(-90deg) translateZ(30vmin) translateY(0px);
background-color: #d8d8d8;
}
.content {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background-color: #a7ff8d;
color: #f00;
font-size: 3em;
}
.arrow {
margin: auto;
position: absolute;
left: 50%;
top: 90vmin;
width: 5vmin;
height: 5vmin;
margin-left: -2.5vmin;
margin-top: -2.5vmin;
}
.achse {
height: 2px;
width: 65vmin;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform-origin: 0;
backface-visibility: visible;
transform-style: preserve-3d;
}
.achseY {
background: #0f0;
transform: rotateZ(-90deg) rotateX(45deg);
}
.achseZ {
background: #00f;
transform: rotateY(-90deg) rotateX(45deg);
}
.achseX {
transform: rotateX(45deg);
}
#deBug {
background: #000;
color: #FFF;
font-size: 2em;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
#buttons {
width: 100%;
height: 100%;
z-index: 5;
}
#dir1 {
margin-left: -27.5vmin;
background-color: red;
z-index: 5;
}
#dir2 {
margin-left: -17.5vmin;
background-color: red;
z-index: 5;
}
#dir3 {
margin-left: -7.5vmin;
background-color: red;
z-index: 10;
}
#dir4 {
margin-left: 2.5vmin;
background-color: red;
z-index: 10;
}
#dir5 {
margin-left: 12.5vmin;
background-color: red;
z-index: 5;
}
#dir6 {
margin-left: 22.5vmin;
background-color: red;
z-index: 5;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="styles/screen.css">
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="cube" class="gimbal">
<div class="cubeface" id="A">
<div class="content" id="main">
<p>A</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="B">
<div class="content" id="">
<p>B</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir5 up">
</div>
<div class="dir6 down">
</div>
</div>
<div class="cubeface" id="C">
<div class="content" id="">
<p>C</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir4 up">
</div>
<div class="dir3 down">
</div>
</div>
<div class="cubeface" id="D">
<div class="content" id="">
<p>D</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir6 up">
</div>
<div class="dir5 down">
</div>
</div>
<div class="cubeface" id="E">
<div class="content" id="">
<p>E</p>
</div>
<div class="dir6 right">
</div>
<div class="dir5 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="F">
<div class="content" id="">
<p>F</p>
</div>
<div class="dir5 right">
</div>
<div class="dir6 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
</div>
<div id="buttons">
<div class='arrow' id='dir1'>Y+</div>
<div class='arrow' id='dir2'>Y-</div>
<div class='arrow' id='dir3'>X+</div>
<div class='arrow' id='dir4'>X-</div>
<div class='arrow' id='dir5'>Z+</div>
<div class='arrow' id='dir6'>Z-</div>
</div>
</body>
</html>
GLOBAL ROTATION - AXES DON'T ROTATE WITH THE CUBE
function rotate(axis, degrees) {
let outermostRotator = $('body > .gimbal').get(0);
outermostRotator.outerHTML = `<div class='gimbal' id='container' style="transition: all 0.5s; transform-style: preserve-3d; transform: rotate${axis}(0deg); position: relative; transition-timing-function: ease-in-out; width: 0; height: 0; transform-origin: 50vw 50vh;">${outermostRotator.outerHTML}</div>`;
window.setTimeout(function () {
container.style.transform = `rotate${axis}(${degrees}deg)`;
container.removeAttribute('id');
}, 10);
}
$('#dir1').on('click', function () {
rotate('Y', '90');
});
$('#dir2').on('click', function () {
rotate('Y', '-90');
});
$('#dir3').on('click', function () {
rotate('X', '90');
});
$('#dir4').on('click', function () {
rotate('X', '-90');
});
$('#dir5').on('click', function () {
rotate('Z', '90');
});
$('#dir6').on('click', function () {
rotate('Z', '-90');
});
rotate('X', '0');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-size: 16px;
font-family: sans-serif;
width: 100%;
height: 100%;
-webkit-perspective: 100vmax;
/* Safari 4-8 */
-webkit-perspective-origin: 50% 50%;
/* Safari 4-8 */
perspective: 100vmax;
perspective-origin: 50% 50%;
overflow: hidden;
}
#cube {
margin: auto;
position: absolute;
top: 50vh; left: 50vw;
transform-style: preserve-3d;
}
.cubeface {
position: absolute;
height: 60vmin;
width: 60vmin;
margin-left: -30vmin;
margin-top: -30vmin;
opacity: 0.5;
}
.cubeface:nth-child(1) {
transform: rotateY(0deg) translateY(0px) translateZ(30vmin);
background-color: black;
}
.cubeface:nth-child(2) {
transform: rotateY(90deg) translateY(0px) translateZ(30vmin);
background-color: #343434;
}
.cubeface:nth-child(3) {
transform: rotateY(180deg) translateY(0px) translateZ(30vmin);
background-color: #525252;
}
.cubeface:nth-child(4) {
transform: rotateY(270deg) translateY(0px) translateZ(30vmin);
background-color: #818181;
}
.cubeface:nth-child(5) {
transform: rotateX(90deg) translateZ(30vmin) translateY(0px);
background-color: #a0a0a0;
}
.cubeface:nth-child(6) {
transform: rotateX(-90deg) translateZ(30vmin) translateY(0px);
background-color: #d8d8d8;
}
.content {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
background-color: #a7ff8d;
color: #f00;
font-size: 3em;
}
.arrow {
margin: auto;
position: absolute;
left: 50%;
top: 90vmin;
width: 5vmin;
height: 5vmin;
margin-left: -2.5vmin;
margin-top: -2.5vmin;
}
.achse {
height: 2px;
width: 65vmin;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform-origin: 0;
backface-visibility: visible;
transform-style: preserve-3d;
}
.achseY {
background: #0f0;
transform: rotateZ(-90deg) rotateX(45deg);
}
.achseZ {
background: #00f;
transform: rotateY(-90deg) rotateX(45deg);
}
.achseX {
transform: rotateX(45deg);
}
#deBug {
background: #000;
color: #FFF;
font-size: 2em;
padding: 1em;
position: absolute;
top: 0;
right: 0;
}
#buttons {
width: 100%;
height: 100%;
z-index: 5;
}
#dir1 {
margin-left: -27.5vmin;
background-color: red;
z-index: 5;
}
#dir2 {
margin-left: -17.5vmin;
background-color: red;
z-index: 5;
}
#dir3 {
margin-left: -7.5vmin;
background-color: red;
z-index: 10;
}
#dir4 {
margin-left: 2.5vmin;
background-color: red;
z-index: 10;
}
#dir5 {
margin-left: 12.5vmin;
background-color: red;
z-index: 5;
}
#dir6 {
margin-left: 22.5vmin;
background-color: red;
z-index: 5;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="styles/screen.css">
<script src="scripts/jquery-3.3.1.min.js"></script>
<script src="scripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="cube" class="gimbal">
<div class="cubeface" id="A">
<div class="content" id="main">
<p>A</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="B">
<div class="content" id="">
<p>B</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir5 up">
</div>
<div class="dir6 down">
</div>
</div>
<div class="cubeface" id="C">
<div class="content" id="">
<p>C</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir4 up">
</div>
<div class="dir3 down">
</div>
</div>
<div class="cubeface" id="D">
<div class="content" id="">
<p>D</p>
</div>
<div class="dir1 right">
</div>
<div class="dir2 left">
</div>
<div class="dir6 up">
</div>
<div class="dir5 down">
</div>
</div>
<div class="cubeface" id="E">
<div class="content" id="">
<p>E</p>
</div>
<div class="dir6 right">
</div>
<div class="dir5 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
<div class="cubeface" id="F">
<div class="content" id="">
<p>F</p>
</div>
<div class="dir5 right">
</div>
<div class="dir6 left">
</div>
<div class="dir3 up">
</div>
<div class="dir4 down">
</div>
</div>
</div>
<div id="buttons">
<div class='arrow' id='dir1'>Y+</div>
<div class='arrow' id='dir2'>Y-</div>
<div class='arrow' id='dir3'>X+</div>
<div class='arrow' id='dir4'>X-</div>
<div class='arrow' id='dir5'>Z+</div>
<div class='arrow' id='dir6'>Z-</div>
</div>
</body>
</html>

CSS Animation on iOS devices

I am using a CSS flip animation to show content on one side and text on the other. The animation works using a hover selector on desktop browsers. On mobile devices it should use a touch event to carry out the flip.
It works on edge, chrome and firefox and I have added additional CSS to handle older versions of IE.
However when I run it up on my iPhone I cannot get the the flip animation to work as expected.
I have attached a fiddle to show the issue I am having.
https://jsfiddle.net/rsmith93/oehqd5j6/
$(".flip-container").hover(function() {
$(this).toggleClass('hover');
});
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 360px;
height: 270px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
border: 1px solid black;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
background: rgba(33, 33, 33, 1);
color: white;
}
.name1 {
font-size: 1.5em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 40px;
left: 4px;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:
<div class="row">
<div class="col-sm-4">
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 1</span>
</div>
<div class="back">
<!-- back content -->
back panel
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="flip-container" onclick="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 2</span>
</div>
<div class="back">
<!-- back content -->
back 2
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<span class="name1">panel 3</span>
</div>
<div class="back">
<!-- back content -->
back 3
</div>
</div>
</div>
</div>
Any help here is appreciated.

Left right button for slider like Bootstrap carousel

I Want to slide my images right and left on click. I use jquery for that. but problem is that when I continue to click on right the div goes right and blank space display. I tried but it not fixes. I'm a newbie in jquery.
<!DOCTYPE html><html class=''>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style class="cp-pen-styles">
.row_outer {
*overflow-x: auto;
width: 100%;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 326px;
height: 192px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 326px;
height: 192px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.tile__details:before {
content: '▶';
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
color: #fff;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
color: #fff;
}
.row__inner:hover {
-webkit-transform: translate3d(-72.5px, 0, 0);
transform: translate3d(-72.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(215px, 0, 0);
transform: translate3d(215px, 0, 0);
}
.buttons{
position: absolute;
width: 100%;
margin-right: 10px;
font-size: 20px;
margin-top: -190px;
}
.buttons button{
height: 100%;
padding: 7px 20px;
color: #fa8f33;
border: 1px solid
}
.left{
float: left;
}
.right{
float: right;
}
/* Sweep To Right */
.hvr-sweep-to-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fa8f33;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* Sweep To Left */
.hvr-sweep-to-left {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-left:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fa8f33;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active {
color: white;
}
.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style></head><body>
<div class="contain">
<div class="row_outer">
<div class="row__inner">
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img " src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img " src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
</div>
</div>
</div>
<div class="buttons">
<button class="left hvr-sweep-to-left " id="left"><span><i class="fa fa-angle-double-left" aria-hidden="true"></i>
</span></button>
<button href="" class="right hvr-sweep-to-right " id="right"><span><i class="fa fa-angle-double-right" aria-hidden="true"></i>
</span></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( "#right" ).click(function() {
$( ".tile" ).animate({ "left": "+=365px" }, "1000" );
});
$( "#left" ).click(function(){
$( ".tile" ).animate({ "left": "-=365px" }, "1000" );
});
</script>
</body></html>

You can check this out jsfiddle link
var slideIndex = 1;
var length = $(".tile").length;
$( "#right" ).click(function() {
if(slideIndex != 1){
$( ".tile" ).animate({ "left": "+=365px" }, "1000" );
slideIndex--;
}
});
$( "#left" ).click(function() {
if(slideIndex >= length-1 ){
}else{
$( ".tile" ).animate({ "left": "-=365px" }, "1000" );
slideIndex++;
}
});

Thanks to Every one who looked into it. I Fix my problem.
This is my Solution :
var $par = $('.row_outer').scrollLeft(546) ;
$('.right, .left').click(function( e ) {
e.preventDefault();
var n = $(this).hasClass("left") ? "+=182" : "-=182";
$par.animate({scrollLeft: n});
});

Font and rear card animation with CSS

I am trying to develop my webpage with some animation effects, and I have three cards with front and back flip animation effect. Now I am looking for front and back animation effect, which I have described in below image clearly.
Image before front and back animation (Initially).
Image after click on card-2,
Example:
var accHD = document.getElementsByClassName('card');
var showNotificationBtn = document.getElementsByClassName('showsettingsbutton');
for (i = 0; i < accHD.length; i++) {
showNotificationBtn[i].addEventListener(
'click', function toggleItem() {
var itemClass = this.parentNode.parentNode.parentNode.className;
for (i = 0; i < showNotificationBtn.length; i++) {
showNotificationBtn[i].parentNode.parentNode.parentNode.parentNode.parentNode.className = 'card';
showNotificationBtn[i].parentNode.parentNode.parentNode.className = 'flipper';
}
this.parentNode.parentNode.parentNode.parentNode.parentNode.className = 'cardlarge';
this.parentNode.parentNode.parentNode.className = 'flipperRotaion';
}
);
}
.card {
padding: 30px;
background: #fff;
/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
transition: 0.3s;
width: 10%;
z-index: 1;
}
.container {
padding: 2px 16px;
}
.cardlarge {
padding: 30px;
background: #fff;
transition: 0.3s;
width: 10%;
-moz-transition: all 2s; -webkit-transition : all 2s; -o-transition :
all 2s; transition : all 2s;
z-index: 2;
-webkit-transition: all 2s;
-o-transition: all 2s;
transition: all 2s;
}
/*Card Design ends here*/
/*Flip Design starts here*/
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
*/
.flipperRotaion {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
/*Flip Design ends here*/
/*Show Notification button design starts here*/
.showsettingsbutton {
border: 0;
background: #0087cc;
border-radius: 4px;
box-shadow: 0 5px 0 #006599;
color: #fff;
cursor: pointer;
font: inherit;
margin: 0;
outline: 0;
padding: 12px 20px;
transition: all .1s linear;
}
.showsettingsbutton:active {
box-shadow: 0 2px 0 #006599;
transform: translateY(3px);
}
<div class="cardlist" align="center">
<div class="card" style="float:left;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
<div class="showsettings">
<button class="showsettingsbutton">Show Settings</button>
</div>
</div>
<div class="back">
<!-- back content -->
<img src="Assert/Settings-icon-2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
<input type="checkbox" name="Notification" value="Email">Email
</div>
</div>
</div>
</div>
</div>
<div class="card" style="float:left;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
<div class="showsettings">
<button class="showsettingsbutton">Show Settings</button>
</div>
</div>
<div class="back">
<!-- back content -->
Back
</div>
</div>
</div>
</div>
<div class="card" style="float:left;">
<div class="flip-container">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
<div class="showsettings">
<button class="showsettingsbutton">Show Settings</button>
</div>
</div>
<div class="back">
<!-- back content -->
<img src="Assert/Settings-icon-2.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Alert Setting</b></h4>
<p>Setting descriptions</p>
</div>
</div>
</div>
</div>
</div>
</div>