I somehow manage to create this. I created a cube, that rotate horizontally, when it is hovered, but i want it to stay at its current location when it is not hovered. Ive been searching this for awhile now, but I cant seem to find the answer.
<html>
<style>
.wrap {
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
-moz-perspective-origin: 50% 100px;
-webkit-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
margin: 0 auto;
margin-top: 30px;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.back {
-webkit-transform: translateZ(-100px) rotateY(180deg);
-moz-transform: translateZ(-100px) rotateY(180deg);
background: orange;
opacity: 0.5;
}
.right {
-webkit-transform: rotateY(-270deg) translateX(100px);
-moz-transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
background: yellow;
opacity: 0.5;
}
.left {
-webkit-transform: rotateY(270deg) translateX(-100px);
-moz-transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
-moz-transform-origin: center left;
background: violet;
opacity: 0.5;
}
.top {
-moz-transform: rotateX(-90deg) translateY(-100px);
-webkit-transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
background: green;
opacity: 0.5;
}
.bottom {
-webkit-transform: rotateX(90deg) translateY(100px);
-moz-transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
background: blue;
opacity: 0.5;
}
.front {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
background: red;
opacity: 0.5;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
.cube:hover {
animation: spin 5s infinite linear;
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
}
</style>
<body>
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div
</body>
</html>
Anynone can point me to the right direction? thank you very much,
You can set the animation for all states of .cube, and just toggle animation-play-state on hovering (see JSFiddle):
.cube {
/* other styles... */
-webkit-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* other rules... */
.cube:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
Also, I suppose that now there is no much need to specify -moz-properties for transforms and animations because Firefox supports them unprefixed since version 16 (it's 7 versions back!).
Following CSS will call in case of mouse hover, as there is no spinning animation within this, it won't trigger any animation
.cube : hover {
//Do nothing
}
Related
I’ve 2 pieces of code that work brilliant independently.
The first will vertically and horizontally center an image regardless of brower size. The second produces the Ken Burns effect.
I would like to vertically and horizontally center the Ken Burns effect regardless of browser size.
Thank you in advance for your time and patience.
First:
<div class="parent">
<img class="responsive center" src="https://unsplash.it/900/700">
</div>
------------
parent {
position: relative;
}
.responsive {
max-width: 100%;
max-height: 100%;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Second:
<div class="image-wrap">
<img src="https://unsplash.it/900/700">
</div>
------------
.image-wrap {
width: 100%;
height: 50vw;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image-wrap img {
width: 100%;
animation: move 40s ease;
-ms-animation: move 40s ease;
-webkit-animation: move 40s ease;
-0-animation: move 40s ease;
-moz-animation: move 40s ease;
position: absolute;
}
#-webkit-keyframes move {
0% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
-o-transform: scale(1.0);
-moz-transform: scale(1.0);
}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
}
Try this code:
.image-wrap {
width: 100%;
height: 100vh;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.image-wrap img {
animation: move 40s ease;
-ms-animation: move 40s ease;
-webkit-animation: move 40s ease;
-0-animation: move 40s ease;
-moz-animation: move 40s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
height: auto;
}
#-webkit-keyframes move {
0% {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
transform: scale(1.0);
-ms-transform: scale(1.0);
-webkit-transform: scale(1.0);
-o-transform: scale(1.0);
-moz-transform: scale(1.0);
}
100% {
transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
}
}
<div class="image-wrap">
<img src="https://unsplash.it/900/700">
</div>
I'm trying to use CSS animations to animate a cube rotating, and pausing on each face for a set amount of time.
Pen here
#keyframes frontToLeft {
75% { transform: rotateY(0); }
100% { transform: rotateY(90deg); }
}
#keyframes leftToBack {
75% { transform: rotateY(90deg); }
100% { transform: rotateY(180deg); }
}
#keyframes backToRight {
75% { transform: rotateY(180deg); }
100% { transform: rotateY(270deg); }
}
#keyframes rightToFront {
75% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.cube-container {
padding-top: 200px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.qube {
position: relative;
width: 200px;
margin: 0 auto;
transform-style: preserve-3d;
animation-name: frontToLeft, leftToBack, backToRight, rightToFront;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-duration: 2s, 2s, 2s, 2s;
animation-delay: 2s, 4s, 6s, 8s;
* {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
}
<div class="cube-container">
<div class="qube">
<div class="front">front</div>
<div class="left">left</div>
<div class="back">back</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>
In Google Chrome and Edge, the animation seems to glitch, but in Firefox it works as intended.
I'd like the outcome to be:
Front Face - Pause 2 seconds, rotate 2 seconds
Left Face - Pause 2 seconds, rotate 2 seconds
Back Face - Pause 2 seconds, rotate 2 seconds
Right Face - Pause 2 seconds, rotate 2 seconds
Can anyone see where this would be going wrong? I have the Codepen preprocessing SCSS with prefixes.
Thanks in advance!
From what I can tell testing this it looks like a bug. Nothing I've tried seems to work to correct the animation. Like you say, Firefox works as expected.
All I can think of as a potential fix is to combine it into one animation something like this:
#keyframes spinCube {
20% { transform: rotateY(0deg); }
25% { transform: rotateY(90deg); }
45% { transform: rotateY(90deg); }
50% { transform: rotateY(180deg); }
70% { transform: rotateY(180deg); }
75% { transform: rotateY(270deg); }
95% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.qube {
animation: spinCube 8s 1 forwards;
}
It would take a bit of tweaking to get the timing right, but it's the only thing I can think of.
Here's a CodePen Example of this alternative solution.
In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture).
This is my code,
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
-webkit-animation: sk-foldCubeAngle 2.4s 0.5 linear both;
animation: sk-foldCubeAngle 2.4s 0.5 linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.sk-folding-cube .sk-cube5:before {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.sk-folding-cube .sk-cube6:before {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Open Cube</title>
<h1>Apertura Cubo</h1>
</head>
<body>
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</body>
</html>
How can I do this?
Judging by the description, snippet and the picture provided in question it seems like you are trying to create a flat cube opening animation where each face of the cube opens one by one and ends up with the appearance as shown in the first sample within the picture.
It might be possible to achieve that effect by enhancing your current code but I found it a bit confusing and so went with my own version of a flat-cube.
Explanation:
First create a cube with six faces (one div element for each face). I've made the front face as a child element of the left face element because the front face should eventually get opened on the left hand side of the left face.
Each face is a 50 x 50px square whose transform and transform-origin properties are set in such a way that it creates a cube.
Opening animation is then attached to each of the faces and a delay is added depending on when each face should get opened. In the demo, the right face gets opened first and so it has no delay, the bottom face is opened second and so it has a delay of 1s (equal to the animation time of right face), the top face is opened third and so has a delay of 2s (equal to combined animation time of the previous two faces) and so on.
The back face doesn't have any animation attached because it doesn't need to open at all ;)
.cube {
position: relative;
margin: 100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
height: 50px;
width: 50px;
transform-style: preserve-3d;
}
.back {
background: rebeccapurple;
}
.right {
background: tomato;
transform: rotateY(90deg);
transform-origin: right;
animation: open-y 1s ease-in-out forwards;
}
.bottom {
background: crimson;
transform: rotateX(270deg);
transform-origin: bottom;
animation: open-x 1s 1s ease-in-out forwards;
}
.top {
background: indianred;
transform: rotateX(90deg);
transform-origin: top;
animation: open-x 1s 2s ease-in-out forwards;
}
.left {
background: yellowgreen;
transform: rotateY(270deg);
transform-origin: left;
animation: open-y 1s 3s ease-in-out forwards;
}
.front {
background: chocolate;
transform: rotateY(270deg);
transform-origin: right;
animation: open-y 1s 3s ease-in-out forwards;
}
#keyframes open-y {
to {
transform: rotateY(180deg);
}
}
#keyframes open-x {
to {
transform: rotateX(180deg);
}
}
<div class="cube">
<div class="back"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="top"></div>
<div class="left">
<div class="front"></div>
</div>
</div>
Note: It is very much possible to achieve a similar effect in other ways also and in addition make them look a lot more realistic but that would most likely involve a good amount of translate transforms, extra keyframe settings for the animations etc - in short, a lot more complex code.
In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture).
This is my code,
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
-webkit-animation: sk-foldCubeAngle 2.4s 0.5 linear both;
animation: sk-foldCubeAngle 2.4s 0.5 linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.sk-folding-cube .sk-cube5:before {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.sk-folding-cube .sk-cube6:before {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Open Cube</title>
<h1>Apertura Cubo</h1>
</head>
<body>
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</body>
</html>
How can I do this?
Judging by the description, snippet and the picture provided in question it seems like you are trying to create a flat cube opening animation where each face of the cube opens one by one and ends up with the appearance as shown in the first sample within the picture.
It might be possible to achieve that effect by enhancing your current code but I found it a bit confusing and so went with my own version of a flat-cube.
Explanation:
First create a cube with six faces (one div element for each face). I've made the front face as a child element of the left face element because the front face should eventually get opened on the left hand side of the left face.
Each face is a 50 x 50px square whose transform and transform-origin properties are set in such a way that it creates a cube.
Opening animation is then attached to each of the faces and a delay is added depending on when each face should get opened. In the demo, the right face gets opened first and so it has no delay, the bottom face is opened second and so it has a delay of 1s (equal to the animation time of right face), the top face is opened third and so has a delay of 2s (equal to combined animation time of the previous two faces) and so on.
The back face doesn't have any animation attached because it doesn't need to open at all ;)
.cube {
position: relative;
margin: 100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
height: 50px;
width: 50px;
transform-style: preserve-3d;
}
.back {
background: rebeccapurple;
}
.right {
background: tomato;
transform: rotateY(90deg);
transform-origin: right;
animation: open-y 1s ease-in-out forwards;
}
.bottom {
background: crimson;
transform: rotateX(270deg);
transform-origin: bottom;
animation: open-x 1s 1s ease-in-out forwards;
}
.top {
background: indianred;
transform: rotateX(90deg);
transform-origin: top;
animation: open-x 1s 2s ease-in-out forwards;
}
.left {
background: yellowgreen;
transform: rotateY(270deg);
transform-origin: left;
animation: open-y 1s 3s ease-in-out forwards;
}
.front {
background: chocolate;
transform: rotateY(270deg);
transform-origin: right;
animation: open-y 1s 3s ease-in-out forwards;
}
#keyframes open-y {
to {
transform: rotateY(180deg);
}
}
#keyframes open-x {
to {
transform: rotateX(180deg);
}
}
<div class="cube">
<div class="back"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="top"></div>
<div class="left">
<div class="front"></div>
</div>
</div>
Note: It is very much possible to achieve a similar effect in other ways also and in addition make them look a lot more realistic but that would most likely involve a good amount of translate transforms, extra keyframe settings for the animations etc - in short, a lot more complex code.
Using keyframe animation, the div with an id of "Second" animates slightly before the "first" div starts to. Here is my code shouldn't they move at the same speed by default? any help would be great thanks.
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
and the HTML,
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
Code on jsfiddle: http://jsfiddle.net/x3p64/
Demo
#-webkit-keyframes were different for both
As per requirements
New Demo
#-webkit-keyframes myfirst {
0% {
-webkit-transform: scaleY(0);
}
20% {
-webkit-transform: scaleY(0.2);
}
40% {
-webkit-transform: scaleY(0.4);
}
60% {
-webkit-transform: scaleY(0.6);
}
80% {
-webkit-transform: scaleY(0.8);
}
100% {
-webkit-transform: scaleY(1);
}
}
#-webkit-keyframes mysecond {
0% {
-webkit-transform: scaleY(1);
}
20% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(0.6);
}
60% {
-webkit-transform: scaleY(0.4);
}
80% {
-webkit-transform: scaleY(0.2);
}
100% {
-webkit-transform: scaleY(0);
}
}
It's not that it is starting before, it just looks like it because of the easing properties. Both animations are starting and stopping at the same time, they just look different. Try using a linear easing on both.
-webkit-animation: mysecond 1s linear;