I have a 2d image in my html which I would like to style it to appear 3d with css but I keep searching the internet and no luck. To add I want the logo to rotate as well. The image is planet earth and I wanted to rotate like that in the navbar. Again have researched and what I get is to rotate the y,x, and z and sometimes to use photoshop.
Here is my code:
* {
box-sizing: border-box;
}
.index-header {
width: 100%;
height: 100px;
background-color: #000;
}
.index-header .index-logo {
float: left;
height: 100px;
width: 100px;
perspective: 360px;
transform: scale3d(360deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header class="index-header">
<img src="logo/logo.png" alt="" class="index-logo" />
</header>
</body>
</html>
Do you mean something like this?
#import url(https://fonts.googleapis.com/css?family=Sigmar+One);
body {
margin: 0;
text-align: center;
background: #F4F1F8;
}
h1 {
font-family: 'Sigmar One', cursive;
color: #FFC84D;
}
h4 {
font-family: monospace;
}
section {
display: block;
width: 660px;
margin: 0 auto;
}
div {
height: 120px;
width: 220px;
}
.container {
position: relative;
display: inline-block;
height: 120px;
margin: 0 2em 2em 0;
opacity: .7;
border-radius: 5px;
background: #E4E1E4;
-webkit-perspective: 400px;
perspective: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.transform {
position: absolute;
bottom: 0;
background: rgba(65, 245, 254, .5);
border-radius: 5px;
-webkit-animation: notransform 5s infinite;
animation: notransform 5s infinite;
}
.translate3d {
-webkit-transform: translate3d(20px,20px,20px);
-ms-transform: translate3d(20px,20px,20px);
transform: translate3d(20px,20px,20px);
}
.scale3d {
-webkit-transform: scale3d(0,0,1);
-ms-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.rotate3d {
-webkit-transform: rotate3d(1, .5, 1, -30deg);
-ms-transform: rotate3d(1, .5, 1, -30deg);
transform: rotate3d(1, .5, 1, -30deg);
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.rotateX {
-webkit-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.rotateY {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.rotateZ {
-webkit-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
transform: rotateZ(180deg);
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
#-webkit-keyframes notransform {
50% {transform: none;}
}
#keyframes notransform {
50% {transform: none;}
}
<h1>CSS3 3D Transform examples</h1>
<section>
<div class="container">
<div class="transform translate3d"><h4>translate3d(20px,20px,20px)</h4></div>
</div>
<div class="container">
<div class="transform scale3d"><h4>scale3d(0,0,1)</h4></div>
</div>
<div class="container">
<div class="transform rotate3d"><h4>rotate3d(1, .5, 1, -30deg)</h4></div>
</div>
<div class="container">
<div class="transform rotateX"><h4>rotateX(180deg)</h4></div>
</div>
<div class="container">
<div class="transform rotateY"><h4>rotateY(180deg)</h4></div>
</div>
<div class="container">
<div class="transform rotateZ"><h4>rotateZ(180deg)</h4></div>
</div>
</section>
Related
I have a span element and can not use another. Through this span element I have to achieve spinner/loader functionality and I want behavior looks like given below-
https://codepen.io/supah/pen/BjYLdW
Following is my code which is not working as expected:
<span class="spinner"></span>
.spinner{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Can any one help me where I am lacking?
Not sure what you were doing with spinner--wholePageWithVeil. But, it's not necessary. The bit you were missing was giving the border a width and style.
body {
background-color: #008;
}
.spinner {
animation: spin 1s infinite ease-in-out;
// animation: dash 2s infinite ease-in-out;
border-radius: 50%;
border-top: 2px solid #fff;
display: inline-block;
height: 2em;
margin: calc(50vh - 1em) calc(50vw - 1em);
width: 2em;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<span class="spinner"></span>
This is to Easy.
You need to modified some css, give stroke: #fff; into spinner class.
Please check and let me know further clarificaion.
Hope this help.
html, body {
height: 100%;
background-image: linear-gradient(-105deg, #009acc, #363795);
}
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
stroke: #fff;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
<svg class="spinner" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
Yes you can also create with pure css like that.
Hope this help.
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent;
}
.lds-ring span:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring span:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring span:nth-child(3) {
animation-delay: -0.15s;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="lds-ring">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Yes, you need to change animation css like: animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
Hope this help.
span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
border-color: #000 #000 #000 transparent;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<span></span>
The CSS animation commands are working perfectly but you can not see it. you need an image because you are not using <svg> and <circle> as they use in the example you have attached.
Note that the width and height of .spinner class should be the width and height of the spinner image.
Based on your code:
LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--remove comment to use jquery-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<style>
.spinner {
vertical-align: middle;
width: 128px;
height: 128px;
display: inline-block;
margin-right: 5px;
border-radius: 2em;
-webkit-box-sizing: border-box;
border-top-color: #fff;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
.spinner--wholePageWithVeil{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<span class="spinner" [class.spinner--wholePageWithVeil]="wholePageWithVeil">
<img src="http://www.pbrennan.net/wp-content/uploads/2014/03/ic_progress.png" alt="">
</span>
</body>
</html>
I have the following HTML and CSS code to draw the top of a cube. So it moves down and I want it to animate as if it is opening up. I am unable to figure out how to transform the top so that it appears to open up.
I have included the entire code for the cube. With respect to this, I want the top to open up.
.pers500 {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
-webkit-perspective-origin: 150% 150%;
-webkit-transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
-webkit-transform: translateZ(50px) translateX(171px) translateY(222px);
-moz-transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.4em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px);
-webkit-transform: skewY(40deg) translateZ(50px) translateY(65px) translateX(-20px);
-moz-transform: skewY(40deg) translateZ(50px) translateY(62px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.7em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
-webkit-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
-moz-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
/*0% {transform:rotateX(30deg);}
50% {transform:rotateX(30deg);}
100% {transform:rotateX(30deg);} commented code here doesn't work*/
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
To make the cube open up, you first need to set the transform-origin property (as mentioned in the other answer) to top. This setting would make the top side of the .face.top remain fixed when the rotation is being performed. Then you need to add the rotation using rotateX(). This would rotate the top face to produce the opening effect. Note that the transform property should contain the entire list of transforms for it to open correctly. You cannot just add the rotateX() alone within the animation.
.pers500 {
perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
border: 1px solid brown; /* just for testing */
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.43em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px) translateY(64px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.69em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
transform-origin: top;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
0% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
}
100% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(200deg);
}
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
Note:
Setting a transform-origin will affect the position of the top face in the demo and so the values that you've used for translateX() and translateY() on the top face need to be modified a bit like in the above demo.
The vendor prefixed versions of properties should always be added before the standard property in order to be future proof.
I have removed the vendor prefixed versions in the above snippet just to keep it simple.
Set the transform origin to tbe edge of the cube with
transform-origin: 0 50% 0;
Then rotate it around the z axis:
transform: rotateZ(90deg);
I hope this works for you, I didn't have the chance to test it.
How to make a body transformation has occurred relative to the center of the screen, not the center of the page along the Y-axis ?
link to the code
http://codepen.io/anon/pen/gPqKXe
it is more text for publish1 it is more text for publish2
.blok {
height: 100px;
background-color: #92FF00;
border: 2px solid black;
font-size:36px;
text-align: center;
padding: 85px 0 35px 0 ;
}
body {
transform: perspective( 200px );
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRightSideFirst 5s forwards ease-in;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRightSideFirst 5s forwards ease-in;
transform-style: preserve-3d;
transform-origin: 50% 50%;
animation: rotateRightSideFirst 5s forwards ease-in;
}
#-webkit-keyframes rotateRightSideFirst {
50% { -webkit-transform: translateZ(-700px) ;
-webkit-animation-timing-function: ease-out; }
100% { -webkit-transform: translateZ(-200px); }
}
#-moz-keyframes rotateRightSideFirst {
50% { -moz-transform: translateZ(-700px) ; -moz-animation-timing-function: ease-out; }
100% { -moz-transform: translateZ(-200px); }
}
#keyframes rotateRightSideFirst {
50% { transform: translateZ(-700px) ; animation-timing-function: ease-out; }
100% { transform: translateZ(-200px); }
}
<div class="blok">1</div>
<div class="blok">2</div>
<div class="blok">3</div>
<div class="blok">4</div>
<div class="blok">5</div>
<div class="blok">6</div>
<div class="blok">7</div>
<div class="blok">8</div>
<div class="blok">9</div>
<div class="blok">10</div>
<div class="blok">11</div>
<div class="blok">12</div>
<div class="blok">13</div>
<div class="blok">14</div>
<div class="blok">15</div>
<div class="blok">16</div>
<div class="blok">17</div>
<div class="blok">18</div>
I'm not sure but maybe you would like to have a div wrapper thats fixed on screen. Following css rule would help you:
.fixedWrapper {
position: fixed;
left: 0px;
right: 0px;
height:100%;
width:100%
}
And
<div class="fixedWrapper">
... your html content...
</div>
If you'd like to have it in center of page (along the header and footer) you would create a wrapper and position it absolute with left & top 50% and with transform: translate(-50%, -50%) as well.
If .blok haa a width set you can use margin: 0 auto;.
Otherwise:
.blok {
position: relative;
left: 50%;
transform: translateX(-50%);
}
I'm working on a card flip animation using keyframes. Aside from the fact I need the origin of the animation to be in the middle, the card flips fine on hover. However, I need to "unflip" on hover off. Right now it's just resetting and not animating.
.oisqa-widget .flip-container:hover .flipper {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipcard 1s 0s 1 normal forwards;
-moz-animation: flipcard 1s 0s 1 normal forwards;
animation: flipcard 1s 0s 1 normal forwards; }
I've created a jsfiddle to show what's happening
Dont use keyframe animation for hover effects Just removed #keyframe css rules and added it inside containers on hover so that it will automatically handles hover off effect!
Here is the code jSfiddle
for FullScreen jsFiddle
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.oisqa-widget {
float: left;
width: 100%;
}
.oisqa-widget .flip-container {
height: 170px;
}
.oisqa-widget .flip-container:hover .flipper {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(2) rotateY(180deg);
}
.oisqa-widget .flip-container {
display: block;
float: left;
margin-right: 2.12766%;
width: 31.91489%;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.oisqa-widget .flip-container:last-child {
margin-right: 0;
}
.oisqa-widget .flipper {
position: relative;
transition: 0.6s;
transform-style: preserve-3d;
}
.oisqa-widget .front,
.oisqa-widget .back {
position: absolute;
top: 0px;
left: 0px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 170px;
padding: 20px;
text-align: center;
width: 100%;
}
.oisqa-widget .front {
background: white;
border: 1px #c3c3c3 solid;
border-top: 5px #1c4295 solid;
transform: rotateY(0deg);
z-index: 2;
}
.oisqa-widget .back {
background: #1c4295;
border: 1px #c3c3c3 solid;
border-top: 5px #f4f4f4 solid;
color: white;
transform: rotateY(180deg);
}
.oisqa-widget .back strong {
color: white;
}
.oisqa-widget strong {
color: #1c4295;
}
<div class="oisqa-widget">
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 1</p>
</div>
<div class="back">
<p class="question">answer 1</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 2</p>
</div>
<div class="back">
<p class="question">answer 2</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 3</p>
</div>
<div class="back">
<p class="question">answer 3</p>
</div>
</div>
</div>
</div>
This will seem a little convoluted so bear with me...
To get the desired effect I used 3 separate animations, 2 of which are the same as your current flipcard animation, so you'll end up with flipcard, flipcard2, and hideAnswer.
To get the flipcard animation to work in both directions you'll need to add flipcard2 to the initial state of .flipper, I know this seems odd, but the hover state and the initial state need to use animations with different names, you can't use the same animation and just flip the direction. So:
.oisqa-widget .flipper {
position: relative;
/*transition: 0.6s; remove this */
transform-style: preserve-3d;
-webkit-animation: flipcard2 1s 0s 1 reverse forwards;
-moz-animation: flipcard2 1s 0s 1 reverse forwards;
animation: flipcard2 1s 0s 1 reverse forwards;
/*note that flipcard and flipcard2 are the same but here the direction is reversed*/
}
Now just doing this will get your animation going in both directions, but your answers will show when the page first loads.
To prevent that you'll need to hide everything for the first second while the animation plays through on the initial state, hence the 3rd animation hideAnswer:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
animation: hideAnswer 1s;
}
#keyframes hideAnswer {
0%{opacity: 0;}
99%{opacity: 0;}
100%{opacity:1;}
}
Now put it all together and you'll get:
Working Example on jsFiddle
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: hideAnswer 1s;
-o-animation: hideAnswer 1s;
-moz-animation: hideAnswer 1s;
animation: hideAnswer 1s;
}
#-o-keyframes hideAnswer {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes hideAnswer {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity:1;
}
}
#-moz-keyframes hideAnswer {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity:1;
}
}
#keyframes hideAnswer {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes flipcard {
0% {
-webkit-transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2) rotateY(180deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
}
}
#-moz-keyframes flipcard {
0% {
-moz-transform: scale(1) rotateY(0);
}
50% {
-moz-transform: scale(2) rotateY(180deg);
}
100% {
-moz-transform: scale(1) rotateY(180deg);
}
}
#-o-keyframes flipcard {
0% {
-o-transform: scale(1) rotateY(0);
}
50% {
-o-transform: scale(2) rotateY(180deg);
}
100% {
-o-transform: scale(1) rotateY(180deg);
}
}
#keyframes flipcard {
0% {
transform: scale(1) rotateY(0);
}
50% {
transform: scale(2) rotateY(180deg);
}
100% {
transform: scale(1) rotateY(180deg);
}
}
#-webkit-keyframes flipcard2 {
0% {
-webkit-transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2) rotateY(180deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
}
}
#-moz-keyframes flipcard2 {
0% {
-moz-transform: scale(1) rotateY(0);
}
50% {
-moz-transform: scale(2) rotateY(180deg);
}
100% {
-moz-transform: scale(1) rotateY(180deg);
}
}
#-o-keyframes flipcard2 {
0% {
-o-transform: scale(1) rotateY(0);
}
50% {
-o-transform: scale(2) rotateY(180deg);
}
100% {
-o-transform: scale(1) rotateY(180deg);
}
}
#keyframes flipcard2 {
0% {
transform: scale(1) rotateY(0);
}
50% {
transform: scale(2) rotateY(180deg);
}
100% {
transform: scale(1) rotateY(180deg);
}
}
.oisqa-widget {
float: left;
width: 100%;
}
.oisqa-widget .flip-container {
height: 170px;
}
.oisqa-widget .flip-container {
display: block;
float: left;
margin-right: 2.12766%;
width: 31.91489%;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.oisqa-widget .flip-container:last-child {
margin-right: 0;
}
.oisqa-widget .flip-container:hover .flipper {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: flipcard 1s 0s 1 normal forwards;
-moz-animation: flipcard 1s 0s 1 normal forwards;
animation: flipcard 1s 0s 1 normal forwards;
}
.oisqa-widget .flipper {
position: relative;
/*transition: 0.6s; remove this */
transform-style: preserve-3d;
-webkit-animation: flipcard2 1s 0s 1 reverse forwards;
-moz-animation: flipcard2 1s 0s 1 reverse forwards;
animation: flipcard2 1s 0s 1 reverse forwards;
}
.oisqa-widget .front, .oisqa-widget .back {
position: absolute;
top: 0px;
left: 0px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 170px;
padding: 20px;
text-align: center;
width: 100%;
}
.oisqa-widget .front {
background: white;
border: 1px #c3c3c3 solid;
border-top: 5px #1c4295 solid;
transform: rotateY(0deg);
z-index: 2;
}
.oisqa-widget .back {
background: #1c4295;
border: 1px #c3c3c3 solid;
border-top: 5px #f4f4f4 solid;
color: white;
transform: rotateY(180deg);
}
.oisqa-widget .back strong {
color: white;
}
.oisqa-widget strong {
color: #1c4295;
}
<div class="oisqa-widget">
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 1</p>
</div>
<div class="back">
<p class="question">answer 1</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 2</p>
</div>
<div class="back">
<p class="question">answer 2</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p class="question">question 3</p>
</div>
<div class="back">
<p class="question">answer 3</p>
</div>
</div>
</div>
</div>
I've got some boxes (think oblong chocolate boxes) that I want to unfold and show the contents of. The content will be another div with text, video etc., but I'm currently concerned with the unfolding animation itself.
I've got it sort of working, but the top two divs leave a gap between them while animating. Is there some way I can link them together while 'unfolding' them?
Demo: JSFiddle
HTML:
<section>
<div class="block3d">
<div class="front">
<h4>CHOCOLATE</h4>
</div>
<div class="top"><h4></h4></div>
<div class="back">
<ul>
<li>Chocolate</li>
<li>Milk</li>
<li>Nuts</li>
<li>Oranges</li>
</ul>
<a class="infolink" href="#">Open me</a>
</div>
<div class="bottom"><h4></h4></div>
</div>
</section>
Javascript:
$(document).ready(function(){
$(".block3d .infolink").click(function(e){
openBlock(this, e);
});
});
function openBlock(element, event)
{
event.preventDefault();
$(element).closest('section').addClass('open');
$.scrollTo($(element).closest('section'), {duration: 1000});
}
CSS:
section
{
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-ms-perspective: 800px;
-ms-perspective-origin: 50% 100px;
perspective: 800px;
perspective-origin: 50% 100px;
width: 960px;
height: 240px;
margin: 10px auto;
transition-property: height;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 100ms;
}
section.open
{
height: 960px;
}
.block3d
{
position: relative;
width: 960px;
height: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 0 auto;
-webkit-transform-origin: 0 100px;
-moz-transform-origin: 0 100px;
-ms-transform-origin: 0 100px;
transform-origin: 0 100px;
transition-property: transform, display;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 100ms;
}
.block3d:hover, .open .block3d
{
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
/* Positioning of the different faces of the block */
.block3d div
{
position: absolute;
width: 960px;
height: 200px;
background-color: rgba(0,0,0,0.4);
color: #FFFFFF;
}
.block3d .back
{
-webkit-transform: translateZ(-100px) rotateX(180deg);
-moz-transform: translateZ(-100px) rotateX(180deg);
-ms-transform: translateZ(-100px) rotateX(180deg);
transform: translateZ(-100px) rotateX(180deg);
background-color: #323232;
}
.block3d .top
{
-webkit-transform: rotateX(-270deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform: rotateX(-270deg) translateY(-100px);
-moz-transform-origin: top center;
-ms-transform: rotateX(-270deg) translateY(-100px);
-ms-transform-origin: top center;
transform: rotateX(-270deg) translateY(-100px);
transform-origin: top center;
}
.block3d .bottom
{
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
.block3d .front
{
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
/* Div content styling */
.block3d h4, .block3d ul
{
margin-left: 480px;
background-color: #323232;
margin-top: 0;
}
.block3d h4
{
font-size: 20px;
text-align: center;
padding-top: 90px;
height: 110px;
width: 300px;
}
.block3d ul
{
padding: 40px;
height: auto;
width: 220px;
}
.block3d .infolink
{
display: block;
margin-left: 455px;
height: 30px;
width: 100px;
color: #ffffff;
text-align: center;
padding: 2px;
border: 1px dashed #FFFFFF;
border-top-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom: 0;
}
/* Open animations for the different parts */
.open .block3d .top
{
-webkit-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
-moz-transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
transform: rotateX(-360deg) translateY(-200px) translateZ(100px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 0s;
}
#-webkit-keyframes openback
{
0% {-webkit-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {-webkit-transform: rotateX(270deg) translateZ(300px)}
100% {-webkit-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
#-moz-keyframes openback
{
0% {-moz-transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {-moz-transform: rotateX(270deg) translateZ(300px)}
100% {-moz-transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
#keyframes openback
{
0% {transform: translateZ(-100px) rotateX(180deg) translateY(0)}
50% {transform: rotateX(270deg) translateZ(300px)}
100% {transform: rotateX(360deg) translateY(400px) translateZ(100px)}
}
.open .block3d .back
{
-webkit-animation: openback 1s 1 linear forwards;
-moz-animation: openback 1s 1 linear forwards;
animation: openback 1s 1 linear forwards;
}
.open .block3d .bottom
{
-webkit-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
-moz-transform: rotateX(-360deg) translateZ(100px) translateY(200px);
transform: rotateX(-360deg) translateZ(100px) translateY(200px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 0.5s;
transition-delay: 0.0s;
}
/* Move the block into place */
.open .block3d
{
-webkit-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
-moz-transform: translateZ(100px) rotateX(180deg) translateY(-440px);
transform: translateZ(100px) rotateX(180deg) translateY(-440px);
transition-property: transform;
transition-timing-function: linear;
transition-duration: 1s;
transition-delay: 0s;
}
If you are looking for cool paper fold/unfolding animations take a look at this tutorial and here is the code on git. I'd look specifically the pfold.jquery.js file in order to achieve this sort of animation.
Although it might take a little tweaking of the js/css to get it to look how you want since this is for unfolding paper instead of unwrapping a box, but the basic animation is there.
You can add a 1px pseudo element to the top and bottom of the intersecting elements. You may want to add this during the animation and then remove it after so you don't see extra space when it has stopped.
Here is a JSFiddle
Relevant CSS
.back {
position: absolute;
top: -1px;
margin-top: 1px;
margin-bottom: 1px;
}
.block3d h4
{
display: block;
position: absolute;
top: -1px;
font-size: 20px;
text-align: center;
padding-top: 90px;
height: 110px;
width: 300px;
margin-top: 1px;
margin-bottom: 1px;
}
.block3d h4:before,
.block3d h4:after,
.back:before,
.back:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #323232;
}
.block3d h4:before,
.back:before {
top: -1px;
}
.block3d h4:after,
.back:after {
bottom: -1px;
}