css transitions - CSS3 - 3D Card flip animation without using click events -

-

this question has answer here:

i'm new in css3, , interested in 3d animation it. have question , hope can me. there way make card flip effect without using click events? have searched lot not generate results little experience. please, me?

you can css-transitions , no javascript @ all. using :target css attribute detect state of card

css

a {   display: block;   margin-bottom: 10px;   padding: 10px;   width: 135px;   background: red;   border: 1px solid black;   border-radius: 10px;   color: white;   text-transform: uppercase;   text-decoration: none; }  a.unflip { display: none; } div.card { position: relative; }  img {    position: absolute;   width: 190px;   height: 265px;   -webkit-transition: 1s;   -moz-transition: 1s;   -o-transition: 1s;   -ms-transition: 1s;   transition: 1s; }  img.front { z-index: 1; }  img.back, div#flip:target img.front {   -webkit-transform: rotatey(-180deg);   -moz-transform: rotatey(-180deg);   -o-transform: rotatey(-180deg);   -ms-transform: rotatey(-180deg);   transform: rotatey(-180deg);   z-index: 0; }  div#flip:target a.flip { display: none; } div#flip:target a.unflip { display: block; }  div#flip:target img.back {   -webkit-transform: rotatey(0deg);   -moz-transform: rotatey(0deg);   -o-transform: rotatey(0deg);   -ms-transform: rotatey(0deg);   transform: rotatey(0deg);   z-index: 1; }

html : 

<div class='card' id='flip'>     <a href='#flip' class='flip'>flip card</a>     <a href='#unflip' class='unflip'>flip card</a>     <img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcrznro98qangrbnmuumctzqnmse0deuqxelgwi2zpskymjd-lqn' class='front' />     <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcqswcvrsqzzfqzympsfvgdombadbqc2b7a1i88kda2p52k3vn0y7w' class='back' /> </div>

demo here : http://jsbin.com/emolev/1/edit


Comments

Post a Comment

Popular posts from this blog

Perl - how to grep a block of text from a file -

-
it can in xml or text format. how in general grep block of text in perl? <track type="ws"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>0</locationindex> <propertyindex>0</propertyindex> </range> </track> <track type="ps" id="1"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>1</locationindex> <propertyindex>1</propertyindex> </range> </track> i want grep type="ps" , till </range> . one solution open file, read line line , match block. open(fh, "file.txt"); foreach $line (<fh>) { if ($line =~ m/type="cc"(.*?)<\/range>/) { print $1; } } but there more optimal solution without reading file line l
Read more

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

-
Image
if set mycoolbar.fixedorder true,only grip on first band hidden. well,if use delphi 7 create vcl forms application,then put coolbar on , create 3 coolbans hold other controls,only grip , top coolbands can hidden setting mycoolbar.fixedorder:=true. i've uploaded picture make things clear. you got fixedorder property wrong. fixed property not allow bands rearranged if set true . setting property of coolbar true keep user changing bands order @ runtime, user can still move , resize bands. can give advice can do, actual solution problem, well, have wait answer. my advice use 3 coolbars in row , setting "fixedorder" property true , bandborderstyle bsnone . way grip hidden on of them. about property, it's not bug of ide, actual preference of property.
Read more

javascript - Animating array of divs; only the final element is modified -

-
this baffling me @ moment. i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows: i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions. problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code: javascript var container;
Read more