html - 2-d box flipping with css, in addition to cascading flex divs -


*note:

this question became quite long. wanted walk through thought process. because of length, made codepens not wish read bottom.

basically want formatting css box flipping effects.
http://codepen.io/kdweber89/pen/myraxa

i origionally went down road: http://codepen.io/kdweber89/pen/wbwqwv

...and wound here, getting css flipping, , loosing styles. http://codepen.io/kdweber89/pen/qwpjew

i trying flipping work out, , flex styling remain. have ideas?

----------------------------------------------------------------------------

i have situation in have neat app cascading flex divs effects. trying incorporate 2-d box flipping each div provide other types of information.

here original html , css code. 

<div class="row">   <div class="item">skittles</div>   <div class="item">butter fingers</div>   <div class="item">oreos</div>   <div class="item">candy</div> </div>  .row{   margin: 5% auto;   display: flex;   display: -webkit-flex;   flex-direction: row;   -webkit-flex-direction: row; }  .item {   display: inline-block;   margin: 10px auto;   padding: 8px 15px;   border-style: solid;   border-color: black;   }

this looks beautiful, , it's framework want continue with; http://codepen.io/kdweber89/pen/myraxa

however ran problems when trying add flipping element it.

i tried this:

http://codepen.io/kdweber89/pen/wbwqwv

.row > .item{        position: absolute;     transform: perspective( 600px ) rotatey( 0deg );     background: white; width: 4em; height: 2em; border-radius: 7px;     backface-visibility: hidden;     transition: transform .5s linear 0s; }  .row > .itemback{        position: absolute;     transform: perspective( 600px ) rotatey( 180deg );     background: white; width: 4em; height: 2em; border-radius: 7px;     backface-visibility: hidden;     transition: transform .5s linear 0s; }  .row:hover > .item {     transform: perspective( 600px ) rotatey( -180deg ); }  .row:hover > .itemback {     transform: perspective( 600px ) rotatey( 0deg ); }   <div class="row">   <div class="item">skittles</div>   <div class="itemback">test</div>    <div class="item">butter fingers</div>   <div class="itemback">test</div>    <div class="item">oreos</div>   <div class="itemback">test</div>    <div class="item">candy</div>   <div class="itemback">test</div>     </div>

but realized not quite solution is. consensus ran fixed initial problem in allowed me incorporate awesome box rotating effects....but wound loosing neat cascade flex style because way able work incorporate third div within classes.

http://codepen.io/kdweber89/pen/qwpjew

<div class = "row">     <div class="threed">         <div class="item"> skittles </div>         <div class="itemback"> test </div>     </div>      <div class="threed">           <div class="item ">butter fingers</div>         <div class="itemback"> test </div>     </div>   </div

so question simply, can bring in flipping effect desire, while incorporating cascading flex style looking for?

the reason border missing third codepen because of 1 tiny issue in code:

.item .itemback {   display: inline-block;   margin: 10px auto;   padding: 8px 15px;   border-style: solid;   border-color: black;   }

having ".item .itemback" implies following rules should apply .itemback elements within .item elements. should add comma between them, means apply .itemback elements , .item elements, this: .item, .itemback.

i made few other modifications, think closer you're looking do: http://codepen.io/ebelinski/pen/byegmg


Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more