Trying to make a cube that spins but it wobbles up and down when it rotates think its got something to do with transform origin. Tried messing around with different values for the cube but it only becomes more exaggerated.
/* Chrome, Safari, Opera */
#keyframes spin-vertical
{
0% { -webkit-transform: rotateX(0); }
100% { -webkit-transform: rotateX(-360deg); }
}
/* Standard syntax */
#-webkit-keyframes spin-vertical
{
0% { -webkit-transform: rotateX(0); }
100% { -webkit-transform: rotateX(-360deg); }
}
body
{
font: normal 30px "HelveticaNeue-Light", sans-serif;
}
.wrapper
{
margin: 200px;
background-color: black;
}
.face
{
background-color: black;
color: white;
padding: 2px 5px;
position: absolute;
width: 300px;
}
.cube
{
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin-vertical 5s infinite linear;
-moz-transform-origin: 10px 18px;
-ms-transform-origin: 10px 18px;
-o-transform-origin: 10px 18px;
-webkit-transform-origin: 10px 18px;
transform-origin: 10px 18px;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
margin: 0 auto;
}
#top
{
-moz-transform: rotatex(-270deg) translatey(-40px);
-ms-transform: rotatex(-270deg) translatey(-40px);
-o-transform: rotatex(-270deg) translatey(-40px);
-webkit-transform: rotatex(-270deg) translatey(-40px);
transform: rotatex(-270deg) translatey(-40px);
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
-webkit-transform-origin: top center;
transform-origin: top center
}
#bottom
{
-moz-transform: rotatex(90deg) translatey(0);
-ms-transform: rotatex(90deg) translatey(0);
-o-transform: rotatex(90deg) translatey(0);
-webkit-transform: rotatex(90deg) translatey(0);
transform: rotatex(90deg) translatey(0);
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
-webkit-transform-origin: bottom center;
transform-origin: bottom center
}
#back
{
-moz-transform: translatez(-40px) rotatex(-180deg);
-ms-transform: translatez(-40px) rotatex(-180deg);
-o-transform: translatez(-40px) rotatex(-180deg);
-webkit-transform: translatez(-40px) rotatex(-180deg);
transform: translatez(-40px) rotatex(-180deg)
}
#front
{
-moz-transform: translatez(40px);
-ms-transform: translatez(40px);
-o-transform: translatez(40px);
-webkit-transform: translatez(40px);
transform: translatez(40px)
}
<body>
<div class="wrapper">
<div class="cube" id="cuberotate">
<div class="face" id="front">FACE 1</div>
<div class="face" id="top">FACE 4</div>
<div class="face" id="bottom">FACE 2</div>
<div class="face" id="back">FACE 3</div>
</div>
</div>
</body>
JSFiddle: https://jsfiddle.net/w1kc28zp/
Any advice would be great.
Done some updates to how the sides are transformed, also you're right about transform-origin. On the cube element it should be "0 20px" where 20px stands for 50% of the height of each side.
See result at: https://jsfiddle.net/w1kc28zp/1/
.cube {
margin: 0 auto;
width:300px;
position:relative;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin:0 20px;
-webkit-animation: spin-vertical 5s infinite linear;
}
#front {
-webkit-transform: translateZ(20px);
}
#top {
transform: rotateX(-270deg) translateY(-20px);
transform-origin:top center;
}
#back {
transform: translateZ(-20px) rotateX(180deg);
}
#bottom {
transform: rotateX(-90deg) translateY(20px);
transform-origin:bottom center;
}
Related
I need to create vertical animated text rotation for my homepage.
I found this very nice example. It uses the CSS property transform: rotateX(0deg); rotateX(90deg); etc.
But there are only four lines of text and I need 6 sentences. Any idea how to make same effect with more than 4 sentences?
.home{
width:100%;
}
.home:before{
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.9);
}
.home h3{
position:absolute;
font-size:74px;
text-align: left;
color:#009393;
margin-left:15%;
font-weight:700;
}
.stage{
width: auto;
margin-top: 15px;
height: 100px;
}
.cubespinner{
-webkit-animation-name:spincube;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:8s;
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:8s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin:40px 40px 0;
-moz-transform-origin:40px 40px 0;
-ms-transform-origin:40px 40px 0;
transform-origin:40px 40px 0;
}
.cubespinner div{
position:absolute;
width:400px;
height:80px;
text-align:left;
color:#109393;
font-family:'Raleway', sans-serif;
font-size:74px;
font-weight:700;
}
.cubespinner .face1{
color:#f1c40f;
-webkit-transform:translateZ(40px);
-moz-transform:translateZ(40px);
-ms-transform:translateZ(40px);
transform:translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face2{
color:#fff;
-webkit-transform: rotateX(90deg) translateZ(40px);
-moz-transform: rotateX(90deg) translateZ(40px);
-ms-transform: rotateX(90deg) translateZ(40px);
transform: rotateX(90deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face3{
color:#f85555;
-webkit-transform:rotateX(180deg) translateZ(40px);
-moz-transform:rotateX(180deg) translateZ(40px);
-ms-transform:rotateX(180deg) translateZ(40px);
transform:rotateX(180deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face4{
color:#fff;
-webkit-transform:rotateX(270deg) translateZ(40px);
-moz-transform:rotateX(270deg) translateZ(40px);
-ms-transform:rotateX(270deg) translateZ(40px);
transform:rotateX(270deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
/*Cubical Flipping or rotation*/
#-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
15% { -webkit-transform: rotateX(90deg);}
25% { -webkit-transform: rotateX(90deg);}
40% { -webkit-transform: rotateX(180deg);}
50% { -webkit-transform: rotateX(180deg);}
65% { -webkit-transform: rotateX(270deg);}
75% { -webkit-transform: rotateX(270deg);}
95% { -webkit-transform: rotateX(360deg);}
100% { -webkit-transform: rotateX(360deg);}
}#keyframes spincube {
from,to {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
15% {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
25% {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
40% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
65% {
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
-ms-transform: rotateX(270deg);
transform: rotateX(270deg);
}
75% {
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
-ms-transform: rotateX(270deg);
transform: rotateX(270deg);
}
90% {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
100% {
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
<div class="home col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 id="resizing-h3" class="" >
<span>
<div class="stage">
<div class="cubespinner">
<div class="face1">Innovative</div>
<div class="face2">Creative</div>
<div class="face3">Unbeatable</div>
<div class="face4">Exceptional</div>
</div>
</div>
</span>
</h3>
</div>
Use of a blank sentence in 2 places
I've attached a code.
It is simple, I just duplicated the div "cubespinner" and make 6 sentences, like you want.
It's a lightweight solution, not for any number of sentences, but it's enough for 6 :)
.home{
width:100%;
}
.home:before{
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.9);
}
.home h3{
position:absolute;
font-size:74px;
text-align: left;
color:#009393;
margin-left:15%;
font-weight:700;
}
.stage{
width: auto;
margin-top: 15px;
height: 100px;
}
.cubespinner{
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:12s;
transform-style:preserve-3d;
transform-origin:40px 40px 0;
}
.cubespinner2{
animation-name:spincube;
animation-timing-function:ease-in-out;
animation-iteration-count:infinite;
animation-duration:12s;
animation-delay: 6s;
transform-style:preserve-3d;
transform-origin:40px 40px 0;
}
.cubespinner div, .cubespinner2 div{
position:absolute;
width:400px;
height:80px;
text-align:left;
color:#109393;
font-family:'Raleway', sans-serif;
font-size:74px;
font-weight:700;
}
.cubespinner .face1, .cubespinner2 .face1{
color:#f1c40f;
transform:translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face2, .cubespinner2 .face2{
color:#fff;
transform: rotateX(90deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face3, .cubespinner2 .face3{
color:#f85555;
transform:rotateX(180deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
.cubespinner .face4, .cubespinner2 .face4{
color:#f1c40f;
transform:rotateX(270deg) translateZ(40px);
-webkit-backface-visibility: hidden;
}
/*Cubical Flipping or rotation*/
#-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
5% { -webkit-transform: rotateX(90deg);}
16% { -webkit-transform: rotateX(90deg);}
21% { -webkit-transform: rotateX(180deg);}
33% { -webkit-transform: rotateX(180deg);}
38% { -webkit-transform: rotateX(270deg);}
50% { -webkit-transform: rotateX(270deg);}
55% { -webkit-transform: rotateX(360deg);}
100% { -webkit-transform: rotateX(360deg);}
}
<div class="home col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3 id="resizing-h3" class="" >
<span>
<div class="stage">
<div class="cubespinner">
<div class="face1"></div>
<div class="face2">Creative</div>
<div class="face3">Unbeatable</div>
<div class="face4">Exceptional</div>
</div>
<div class="cubespinner2">
<div class="face1"></div>
<div class="face2">666666</div>
<div class="face3">555555</div>
<div class="face4">Innovative</div>
</div>
</div>
</span>
</h3>
</div>
I try to create an animation like the animation on mac for a carousel.
I tried to use a 3D cube as the base, but I don't find a way to ad more than four elements in the carousel without broke the animation.
.wrap {
perspective: none;
perspective-origin: 0 0;
margin: 0 auto;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border-style: solid;
border-color: black;
background-color: blue;
opacity: 1;
color : white;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.front {
transform: translateZ(100px);
}
#keyframes spin {
from {
transform: rotateY(0);
}
to {
transform: rotateY(-360deg);
}
}
.cube {
animation: spin 5s infinite linear;
}
<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
i try This code : https://jsfiddle.net/Goby03/jxm8c2ob/
I make 3D cube animation like this one:
.stage {
width: 120px;
height: 120px;
}
#-webkit-keyframes spincube {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(-270deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); }
}
#keyframes spincube {
from,to {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
33% {
-moz-transform: rotateY(-90deg) rotateZ(90deg);
-ms-transform: rotateY(-90deg) rotateZ(90deg);
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
-moz-transform: rotateY(-180deg) rotateZ(90deg);
-ms-transform: rotateY(-180deg) rotateZ(90deg);
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
-moz-transform: rotateY(-270deg) rotateX(90deg);
-ms-transform: rotateY(-270deg) rotateX(90deg);
transform: rotateY(-270deg) rotateX(90deg);
}
83% {
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
.cubespinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 12s;
animation-name: spincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 12s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
-moz-transform-origin: 60px 60px 0;
-ms-transform-origin: 60px 60px 0;
transform-origin: 60px 60px 0;
}
.cubespinner div {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid #ccc;
background: blue;
line-height: 120px;
text-align: center;
font-size: 100px;
color: #fff;
}
.cubespinner .face1 {
-webkit-transform: translateZ(60px);
-moz-transform: translateZ(60px);
-ms-transform: translateZ(60px);
transform: translateZ(60px);
}
.cubespinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(60px);
-moz-transform: rotateY(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) translateZ(60px);
transform: rotateY(90deg) translateZ(60px);
}
.cubespinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
.cubespinner .face4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
}
.cubespinner .face5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
}
.cubespinner .face6 {
-webkit-transform: rotateX(-90deg) translateZ(60px);
-moz-transform: rotateX(-90deg) translateZ(60px);
-ms-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px);
}
<div class="stage">
<div class="cubespinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
<div class="face5">5</div>
<div class="face6">6</div>
</div>
</div>
UPDATE
Hope it's what you're looking for.
$(document).ready(function(){
var carouselCustomeTemplateProps = {
width: 400, /* largest allowed width */
height: 300, /* largest allowed height */
slideLayout : 'fill', /* "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio) */
animation: 'slide3D', /* slide | scroll | fade | zoomInSlide | zoomInScroll */
animationCurve: 'ease',
animationDuration: 1900,
animationInterval: 2000,
slideClass: 'jR3DCarouselCustomSlide',
autoplay: true,
controls: true, /* control buttons */
navigation: '' /* circles | squares | '' */,
perspective: 200,
rotationDirection: 'ltr',
onSlideShow: slideShownCallback
}
function slideShownCallback($slide){
$slide.find('img').attr('src')
}
jR3DCarouselCustomeTemplate = $('.jR3DCarouselGalleryCustomeTemplate').jR3DCarousel(carouselCustomeTemplateProps);
})
.jR3DCarouselGalleryCustomeTemplate {
margin: 0 auto;
}
.jR3DCarouselGalleryCustomeTemplate .captions{
position: relative;
padding: 4px 0;
bottom: 27px;
background: #000;
color: #fff;
display:block;
text-align: center
}
.jR3DCarouselGalleryCustomeTemplate a{
text-decoration: none;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/v1.0.0/dist/jR3DCarousel.min.js"></script>
</head>
<div class="container">
<div class="jR3DCarouselGalleryCustomeTemplate">
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=838" />
<div class="captions">This is custom text slide 1</div>
</div>
<div class="jR3DCarouselCustomSlide">
<a href="http://vinayakjadhav.github.io/jR3DCarousel/" target="_blank">
<img src="https://picsum.photos/600/450?image=839" />
<span class="captions">This is clickable slide 2</span>
</a>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=823" />
<div class="captions">This is custom text slide 3</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=836" />
<div class="captions">This is custom text slide 4</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=838" />
<div class="captions">This is custom text slide 3</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=832" />
<div class="captions">This is custom text slide 4</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="https://picsum.photos/600/450?image=837" />
<div class="captions">This is custom text slide 5</div>
</div>
</div>
</div>
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 have started a 3D rotating image carousel which works fine in Chrome & Firefox but not IE.
I know that IE10+ doesn't yet support the preserve-3d tag but there is meant to be a workaround of putting the transforms on the children, but I can't get it to work.
Any ideas and help will be most welcome.
http://codepen.io/gnm67/pen/izyjs
#Carousel {
display: block;
margin:100px auto 20px auto;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective-origin: 50% 100px;
-ms-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
}
#Spinner {
position: relative;
margin: 0 auto;
height: 350px;
width: 500px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 400px 0px;
-moz-transform-origin: 50% 400px 0px;
-ms-transform-origin: 50% 400px 0px;
transform-origin: 50% 400px 0px;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
-ms-perspective: 1000px;
}
#Carousel .face {
position: absolute;
height: 350px;
width: 500px;
padding: 0px;
}
#Carousel img {
width:500px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}
#Spinner .f0 {
-webkit-transform: rotateY(0deg) translateZ(344px);
-moz-transform: rotateY(0deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(0deg) translateZ(344px);
transform: rotateY(0deg) translateZ(344px);
}
#Spinner .f1 {
-webkit-transform: rotateY(72deg) translateZ(344px);
-moz-transform: rotateY(72deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(72deg) translateZ(344px);
transform: rotateY(72deg) translateZ(344px);
}
#Spinner .f2 {
-webkit-transform: rotateY(144deg) translateZ(344px);
-moz-transform: rotateY(144deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(144deg) translateZ(344px);
transform: rotateY(144deg) translateZ(344px);
}
#Spinner .f3 {
-webkit-transform: rotateY(216deg) translateZ(344px);
-moz-transform: rotateY(216deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(216deg) translateZ(344px);
transform: rotateY(216deg) translateZ(344px);
}
#Spinner .f4 {
-webkit-transform: rotateY(288deg) translateZ(344px);
-moz-transform: rotateY(288deg) translateZ(344px);
-ms-transform: perspective(1000px) rotateY(288deg) translateZ(344px);
transform: rotateY(288deg) translateZ(344px);
}
Note that the -ms- prefix is deprecated, it was supposed to be used only in the release preview, as of the final IE10 the unprefixed properties are supported, which will overwrite the prefixed ones!
That being said, you'll have to change the position of the individual faces instead of rotating the container.
I found the easiest is to shift the faces transform origin into the center, that way you only have to rotate the faces to get the animation running.
Here's a bare to the bones example based on your code: http://jsfiddle.net/k1m045uu/
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#Carousel {
display: block;
margin:100px auto 20px auto;
}
#Spinner {
position: relative;
margin: 0 auto;
height: 350px;
width: 500px;
}
#Carousel .face {
position: absolute;
height: 350px;
width: 500px;
transform-origin: 50% 50% -250px;
transition: all 1.0s ease-in-out;
}
#Carousel img {
width: 500px;
box-shadow: 0 0 0 1px #000;
}
#Spinner .f0 {
transform: perspective(1000px) rotateY(0deg) translateZ(95px);
}
#Spinner .f1 {
transform: perspective(1000px) rotateY(72deg) translateZ(95px);
}
#Spinner .f2 {
transform: perspective(1000px) rotateY(144deg) translateZ(95px);
}
#Spinner .f3 {
transform: perspective(1000px) rotateY(216deg) translateZ(95px);
}
#Spinner .f4 {
transform: perspective(1000px) rotateY(288deg) translateZ(95px);
}
</style>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
</head>
<body>
<div id="Carousel">
Previous Next
<div id="Spinner">
<img class="face f0" src="img/test1.jpg" />
<img class="face f1" src="img/test2.jpg" />
<img class="face f2" src="img/test3.jpg" />
<img class="face f3" src="img/test4.jpg" />
<img class="face f4" src="img/test5.jpg" />
</div>
</div>
<script>
var elements = $('.face');
var rotates = [0, 72, 144, 216, 288];
function rotate(deg)
{
elements.each(function(index)
{
rotates[index] = rotates[index] + deg;
$(this).css('transform', 'perspective(1000px) rotateY(' + rotates[index] + 'deg) translateZ(95px)');
});
}
</script>
</body>
</html>
See also How to recreate perspective-origin effect by transforming child elements? for some more info regarding perspective origin and a further example.
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;
}