How to properly rotate a cube on click? - javascript

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>

Related

I want to add a circular ripple hover effect on image

I want to add a ripple effect animation when hovering over an image. I have a link which he uses ripple effect on button by using JavaScript which i have no idea how it work but i want to use the same method over an image on my code.
https://codepen.io/ViktorKorolyuk/pen/GYGwpv
Above Link shows the ripple effect on button and below is my code with blur effect with no animation at all.So I just want to add a ripple effect using the same method but on image
<html>
<div class="row">
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Architecture</h1></a></div>
</div>
</div>
<!--Second container-->
<div class="column">
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
<div class="div-with-image-and-text">
<div class="row">
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div>
<div class="column half">
<img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
</div></div>
<div class="text"><a href="https://www.w3schools.com/w3images/wedding.jpg"style="text-
decoration:none"><h1 style="color:white;">Landscape</h1></a></div>
</div>
</html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text{
position: relative;
}
.div-with-image-and-text .text {
display:none;
}
.div-with-image-and-text:hover img{
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text{
display: block;
position: absolute;
top: 50%;left: 50%;
transform:translate(-50%, -50%);
text-align:center;
font-family: 'Muli';
color:white;
font-size: 30px;
text-shadow:0 0 10px gray;
}
this way give you ripple effect without your effect that you give with hover
first make a html file and write this code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
anf after that make a css file behind your html file and write this code in cssFile
index.css
/* #keyframes shake {
25% {
transform: rotate(calc(var(--angle) * -1));
}
50% {
transform: rotate(var(--angle));
}
100% {
transform: rotate(0deg);
}
} */
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER:hover {
filter: blur(8px);
-webkit-filter: blur(8px);
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mainRow">
<div class="display">
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Architecture</h1>
</a>
</div> -->
</a>
<a class="HOVER">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<!-- <div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1></a
>
</div> -->
</a>
<a class="HOVER FLASH">
<span></span>
<div class="row">
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
<div class="column half">
<img
src="https://www.w3schools.com/w3images/wedding.jpg"
style="width:100%"
/>
</div>
</div>
<div class="text">
<a
href="https://www.w3schools.com/w3images/wedding.jpg"
style="text-decoration:none"
>
<h1 style="color:white;">Landscape</h1>
</a>
</div>
</a>
</div>
</div>
</body>
</html>
html {
font: 100 1.5em sans-serif;
}
body {
padding: 2em 5em 0em 5em;
}
h1 {
font-weight: 100;
}
.display {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 0.1em;
/* width: 50%; */
}
.HOVER {
--width: 100%;
--time: 0.7s;
position: relative;
display: inline-block;
/* height: 18em; */
/* padding: 1em; */
color: white;
background: #222;
overflow: hidden;
}
.HOVER text {
position: relative;
z-index: 5;
transition: color var(--time);
}
.HOVER:hover text {
color: #222;
}
.HOVER span {
border-radius: 100%;
position: absolute;
display: block;
content: "";
z-index: 0;
width: 0;
height: 0;
background: #fff;
transform: translate(-50%, -50%);
transition: width var(--time), padding-top var(--time);
}
.HOVER:hover span {
width: calc(var(--width) * 2.25);
padding-top: calc(var(--width) * 2.25);
}
.HOVER.FLASH:hover text {
color: white;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
.HOVER.FLASH span {
background: #ff3b3b;
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.animated {
--angle: 5deg;
animation: shake 0.3s;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.mainRow {
display: flex;
flex-wrap: wrap;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 50%;
padding: 0 4px;
}
.column.half {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.div-with-image-and-text {
position: relative;
}
.div-with-image-and-text .text {
display: none;
}
.div-with-image-and-text:hover img {
filter: blur(3px) brightness(40%);
opacity: 0.5;
transform: scale(0.98);
box-shadow: none;
}
.div-with-image-and-text:hover .text {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: "Muli";
color: white;
font-size: 30px;
text-shadow: 0 0 10px gray;
}
Simple CSS solution for the Ripple Effect:
A working example: https://next.plnkr.co/edit/i3HhQVIzlbq5QzGM?preview
HTML
<div class="ripple-effect-container">
<img src="https://www.w3schools.com/w3images/wedding.jpg">
</div>
CSS
.ripple-effect-container {
width: 200px;
height: 200px;
background-position: center;
transition: background 0.2s;
background-color: #063458;
}
.ripple-effect-container:hover {
background: #063458 radial-gradient(circle, transparent 1%, #063458 1%) center/15000%;
}
.ripple-effect-container:active {
background-color: #6eb9f7;
background-size: 100%;
transition: background 0s;
}
.ripple-effect-container img:hover {
opacity: 0.5;
}
.ripple-effect-container img {
object-fit: contain;
width: 100%;
height: 100%;
transition: 0.2s;
}

Prevent Hover card going beyond the page

So I was trying to make a contact card on hover like twitter. When a person hover on a contact name, the card will appear. It is working fine. But it is going beyond the page.
What I need is, show it up and down according to the position.
This is my code
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 0;
bottom: 40px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: 0;
bottom: -20px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent #d9dcde transparent;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.popover__wrapper:hover .popover__content {
z-index: 10;
opacity: 1;
visibility: visible;
transform: translate(0, 10px);
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message p {
text-align: left;
font-size: 13px;
margin: 0;
}
<div class="popover__wrapper m-t-5">
<a>Arshad</a>
<div class="push popover__content">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 no-padding">
<div class="widget-item user ">
<div class="tiles user-dp">
<div class="tiles-body no-padding">
<img src="../assets/img/profiles/arshad-small.jpg" alt="">
<div class="overlayer bottom-right fullwidth">
<div class="overlayer-wrapper">
<div class=" p-l-20 p-r-20 p-b-20 p-t-20">
<div class="text-center"> <a class="hashtags"> Administrator </a> </div>
<div class="clearfix"></div>
</div>
</div>
</div>
<br>
</div>
</div>
<div class="tiles white ">
<div class="tiles-body">
<div class="row">
<div class="user-comment-wrapper pull-left">
<div class="comment">
<div class="user-name text-black semi-bold">Full Name </div>
<div class="preview-wrapper">Designer</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="p-l-15 p-r-20 popover__message">
<p>phone</p>
<p>Email</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried many methods, didn't find exactly. So how do I achieve it? Any help?

CSS Animation takes focus on Samsung s8

Currently I'm working on a site where I have a big infinite animation when the user enters the page. Now, on my computer(google chrome) and my phone(safari),
the animation looks fine and behaves correctly. However, when I tried to enter the site from my friend's Samsung Galaxy S8, the website start glitching.
The url for the site is: website
When I scroll the page down on Samsung Galaxy, the animation on the top always takes the focus, so it's impossible to scroll down to the rest of the page.
Here is my styles for the animation:
.static {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
top: -100px;
opacity: 0.05;
z-index: 230;
user-select: none;
user-drag: none;
}
.error {
text-align: center;
font-size: 95px;
font-weight: 700;
font-style: italic;
text-align: center;
width: 100%;
height: 60px;
letter-spacing: 3px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 30px;
animation: noise 2s linear infinite;
overflow: default;
}
.error::after {
content: 'Philanthropist';
font-size: 95px;
font-style: italic;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: blue;
animation: noise-1 .2s linear infinite;
}
.error::before {
content: 'Philanthropist';
font-size: 95px;
font-style: italic;
text-align: center;
width: 100%;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
color: red;
animation: noise-2 .2s linear infinite;
}
.info {
text-align: center;
font-size: 30px;
font-style: italic;
text-align: center;
height: 60px;
line-height: 60px;
margin: auto;
position: absolute;
top: 200px;
bottom: 0;
left: 0;
right: 0;
animation: noise-3 1s linear infinite;
}
#media (max-width: 900px) {
.error,
.error:after,
.error:before {
font-size: 50px;
padding-left: 40px;
}
.info {
top: 140px;
}
}
#media (max-width: 650px) {
.error,
.error::after,
.error::before {
font-size: 40px;
padding-left: 50px;
}
}
#media (max-width: 450px) {
.error,
.error::after,
.error::before {
font-size: 30px;
}
.error {
top: -60px;
}
.info {
font-size: 20px;
}
#logo-section {
.arrow {
margin-bottom: 40px;
}
}
}
#keyframes noise-1 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: -6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: 2px;
}
}
#keyframes noise-2 {
0%,
20%,
40%,
60%,
70%,
90% {
opacity: 0;
}
10% {
opacity: .1;
}
50% {
opacity: .5;
left: 6px;
}
80% {
opacity: .3;
}
100% {
opacity: .6;
left: -2px;
}
}
#keyframes noise {
0%,
3%,
5%,
42%,
44%,
100% {
opacity: 1;
transform: scaleY(1);
}
4.3% {
opacity: 1;
transform: scaleY(1.7);
}
43% {
opacity: 1;
transform: scaleX(1.5);
}
}
#keyframes noise-3 {
0%,
3%,
5%,
42%,
44%,
100% {
opacity: 1;
transform: scaleY(1);
}
4.3% {
opacity: 1;
transform: scaleY(4);
}
43% {
opacity: 1;
transform: scaleX(10) rotate(60deg);
}
}
And here is the markup for the page:
<% include partials/header %>
<link rel="stylesheet" href="/css/aos.css" />
<link rel="stylesheet" href="/css/landing.css">
<section id="logo-section">
<div class="dark-overlay">
<div class="container h-100">
<div class="row h-100">
<div class="col d-flex flex-column justify-content-center text-center">
<div class="error">Philanthropist</div>
<br />
<br />
<span class="info">The Bedroom</span>
</div>
</div>
</div>
</div>
</section>
<section id="divider">
</section>
<!-- Music Section -->
<section id="music-section" class="py-5">
<div class="dark-overlay">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="display-4 text-center" data-aos-once="true" data-aos-delay="500" data-aos="fade-down" data-aos-duration="900">Music</h2>
<iframe data-aos-once="true" data-aos-delay="500" data-aos="fade-up" data-aos-duration="1100" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/30328335&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=false"
width="70%" data-embed="true" frameborder="no" height="450"></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section id="newsletter-section" class="text-dark">
<div class="container">
<div class="row">
<div class="col-md-5 d-flex flex-column mb-5 mx-auto">
<form action="/subscribe" method="POST">
<h3 class="mb-4 text-center mx-auto">Stay Tuned</h3>
<input type="text" class="form-control form-control-lg mb-3" name="name" placeholder="Name">
<input type="text" class="form-control form-control-lg mb-3" name="email" placeholder="Email">
<button class="btn btn-dark btn-lg btn-block">
Subscribe
</button>
</form>
</div>
<div class="col-md-5 mx-auto">
<h3 class="mb-4 text-center mx-auto">Follow</h3>
<div id="social-media" class="d-flex flex-row justify-content-center mb-0">
<a href="https://twitter.com/philanxy" class="mx-2 icon-button twitter" data-aos-delay="200" data-aos="fade-up" data-aos-duration="800"
data-aos-once="true" target="_blank">
<i class="fa fa-twitter icon-twitter"></i>
<span></span>
</a>
<a href="https://www.facebook.com/philanxyxy/" class="mx-2 icon-button facebook" data-aos-delay="200" data-aos="fade-down"
data-aos-duration="800" data-aos-once="true" target="_blank">
<i class="fa fa-facebook icon-facebook"></i>
<span></span>
</a>
<a href="https://soundcloud.com/philanxy" class="mx-2 icon-button soundcloud" data-aos-delay="200" data-aos="fade-up" data-aos-duration="800"
data-aos-once="true" target="_blank">
<i class="fa fa-soundcloud icon-soundcloud"></i>
<span></span>
</a>
<a href="https://philanthropist.bandcamp.com/" class="mx-2 icon-button bandcamp" data-aos-delay="200"
data-aos="fade-down" data-aos-duration="800" data-aos-once="true" target="_blank">
<i class="fa fa-bandcamp icon-bandcamp"></i>
<span></span>
</a>
</ul>
</div>
</div>
</div>
</section>
<% include partials/footer %>
<script type="text/javascript" src="/js/aos.js"></script>
<script type="text/javascript" src="/js/landing.js"></script>
<script type="text/javascript" src="/js/navbar-fixed.js"></script>
What could be causing this?

How to expand a 3D rectangle to show more rectangles when clicked on it?

I am new to 3D shapes in HTML and CSS. How can I create a 3D rectangle and when clicked on it the rectangle should show 3 more 3D rectangles below it and these rectangles should be clickable.
Any pointers is appreciated.
var vis = false;
var container = document.getElementById("c");
container.onclick = toggleVisibility;
function toggleVisibility() {
container.className = vis ?
"container" : "container vis";
vis = !vis;
}
img {
width: 100%;
}
.container {
position: absolute;
top: 100px;
left: 100px;
perspective: 2000px;
transform-style: preserve-3d;
transform: rotateX(40deg) rotateZ(25deg);
}
.box {
cursor: pointer;
position: absolute;
width: 160px;
height: 160px;
transform-style: preserve-3d;
}
.side {
position: absolute;
width: 160px;
height: 160px;
border: 1px solid rgba(0,0,0,.2);
}
.side-vert {
position: absolute;
width: 30px;
height: 160px;
border: 1px solid rgba(0,0,0,.2);
}
.side-hor {
position: absolute;
width: 160px;
height: 30px;
border: 1px solid rgba(0,0,0,.2);
}
.back {
transform: translateZ(-15px);
}
.left {
transform: translateX(-15px) rotateY(90deg);
}
.right {
transform: translateX(145px) rotateY(90deg);
}
.top {
transform: translateY(-15px) rotateX(90deg);
}
.bottom {
transform: translateY(145px) rotateX(90deg);
}
.front {
transform: translateZ(15px);
}
.r {
transform: translateZ(45px);
}
.g {
visibility: hidden;
transform: translateZ(0);
}
.b {
visibility: hidden;
transform: translateZ(-45px);
}
.r > * {
background-color: rgba(255, 0, 0, 0.2);
}
.g > * {
background-color: rgba(0, 255, 0, 0.2);
}
.b > * {
background-color: rgba(0, 0, 255, 0.2);
}
.vis > * {
visibility: visible;
}
<div id="c" class="container">
<div class="box r">
<div class="side back"></div>
<div class="side-vert left"></div>
<div class="side-vert right"></div>
<div class="side-hor top"></div>
<div class="side-hor bottom"></div>
<div class="side front">
<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
</div>
</div>
<div class="box g">
<div class="side back"></div>
<div class="side-vert left"></div>
<div class="side-vert right"></div>
<div class="side-hor top"></div>
<div class="side-hor bottom"></div>
<div class="side front">
<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
</div>
</div>
<div class="box b">
<div class="side back"></div>
<div class="side-vert left"></div>
<div class="side-vert right"></div>
<div class="side-hor top"></div>
<div class="side-hor bottom"></div>
<div class="side front">
<img src="https://bmdinteractive.com/wp-content/uploads/2017/01/stack-overflow-logo.png">
</div>
</div>
</div>
I hope this helps!
PS: mainly inspired by this article , also, here's a jsfiddle I made with SCSS stylesheet to see the correlations between $dim and $depth and the different transforms

How to make or create flipcards dynamically using javascript or jquery on clicking a button or link? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have made flipping cards which flip when you hover over them. However, i have made a link/button so that on clicking it a new flipcard will be created. Not being able to achieve this.....some help would be appreciated...also m new here !
Below is my html and css code for the flipcards:
$(document).ready(function() {
$("#new").click(function() {
$("card effect__hover").clone().insertAfter(thi);
});
});
html {
background: url(index_bg.jpg) no-repeat;
background-size: cover;
}
.card {
position: relative;
float: left;
width: 200px;
height: 200px;
text-align: center;
margin-top: 100px;
}
.card:nth-child(1) {
margin-top: 100px;
margin-left: 100px;
margin-right: 8px;
}
.card:nth-child(2) {
margin-top: 100px;
margin-right: 8px;
}
.card.effect__ADD {
margin-left: 8px;
}
.card__front,
.card__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card__front,
.card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.card__front {
background-color: blue;
}
.card__back {
background-color: orange;
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.card.effect__ADD:hover .card__front {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.card.effect__ADD:hover .card__back {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
span > p {
margin-top: 80px;
font-family: Arial;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Read</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
<link href="read.css" rel="stylesheet">
</head>
<body>
<div class="card effect__hover">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"></span>
</div>
</div>
</div>
<div class="card effect__hover">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"></span>
</div>
</div>
<div class="card effect__hover">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"></span>
</div>
</div>
<a href="" class="new">
<div class="card effect__ADD">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"><p>Add Your Story</p></span>
</div>
</div>
</a>
</body>
</html>
I would realy appreciate if it can be done in jquery
As in this JSFiddle, I've add an event listener to the <a class="new"> to pick it and then prevents its default action upon the event of clicking.. after that I cloned the first card element and inserted it right before the (add your story) link so that we always have that link at the bottom
$(document).ready(function(){
$('.new').on('click', function(event){
event.preventDefault();
$('.card').first().clone().insertBefore($('.new'));
});
});
.card {
margin:5px;
position: relative;
float: left;
width: 200px;
height: 200px;
text-align: center;
margin-top: 50px;
}
.card:nth-child(1) {
margin-top: 100px;
margin-left: 100px;
margin-right: 8px;
}
.card:nth-child(2) {
margin-top: 100px;
margin-right: 8px;
}
.card.effect__ADD {
margin-left: 8px;
}
.card__front, .card__back {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
.card__front, .card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.card__front {
background-color:blue;
}
.card__back {
background-color:orange;
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.card.effect__ADD:hover .card__front {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.card.effect__ADD:hover .card__back {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
span > p {
margin-top: 80px;
font-family:Arial;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="card effect__hover">
<div class="card__front"> <span class="card__text"></span>
</div>
<div class="card__back"> <span class="card__text"></span>
</div>
</div>
</div>
<div class="card effect__hover">
<div class="card__front"> <span class="card__text"></span>
</div>
<div class="card__back"> <span class="card__text"></span>
</div>
</div>
<div class="card effect__hover">
<div class="card__front"> <span class="card__text"></span>
</div>
<div class="card__back"> <span class="card__text"></span>
</div>
</div>
<a href="" class="new">
<div class="card effect__ADD">
<div class="card__front">
<span class="card__text"></span>
</div>
<div class="card__back">
<span class="card__text"><p>Add Your Story</p></span>
</div>
</div>
</a>
Note that you might need to add margin to the flip card to make gaps between them
Update upon a comment:
The messy arrangement of the flip cards is caused becaus:
In the .card css you have float: left;, remove this and add this line instead display:inline-block;, this will line them all up on the same line
in the .card:nth-child(1) css remove these two lines margin-top: 100px; and margin-left: 100px;, by doing this you will omit the unwanted gap before the first card.
After doing above, the result you'll get is like in this JSFiddle

Categories

Resources