<!-- playing around with css 3d transforms--><p>&nbsp;</p>
<div><div id="blue"><div class="box"></div></div>
<section class="container">
  <div id="card">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
  </div>
</section>
<section class="container2">
  <div id="card2">
    <figure class="front2">flip in <br>right</figure>
    <figure class="back2">4</figure>
  </div><p>texttex ttex tt  exttexttexttextt exttex ttexttex ttextt extte xt</p>
</section>
  <section class="container2a">
  <div id="card2a">
    <figure class="front2a">flip out <br>left</figure>
    <figure class="back2a">5</figure>
  </div><p>texttex ttex tt  exttexttexttextt exttex ttexttex ttextt extte xt</p>
</section>
  <!-- new section -->
 <section class="container25">
  <div id="card25">
    <figure class="front25">3</figure>
    <figure class="back25">lift up</figure>
  </div>
   <!--<p>texttex ttex tt  exttexttexttextt exttex ttexttex ttextt extte xt</p>--><img src="http://php.shanezentz.com/el-tiene-un-cabeza-de-gato.png" />
</section>

<!-- end new section -->
   <section class="container2b">
  <div id="card2b">
    <figure class="front2b">flip out<br>right</figure>
    <figure class="back2b"><br>Hello!<figure>
  </div>
</section>
  <section class="container3">
  <div id="outer"><div id="card3">
    <figure class="front3"><br>Flip<br>Book</figure>
    <figure class="back3"><p><img src="http://php.shanezentz.com/el-tiene-un-cabeza-de-gato.png" />text text text text text text text</p></figure>
    </div></div>
</section>
    <section class="container3a">
  <div id="outer"><div id="card3a">
    <figure class="front3a"><br>Flip<br>Book</figure>
    <figure class="back3a"><p><img src="http://php.shanezentz.com/el-tiene-un-cabeza-de-gato.png" />text text text text text text text</p></figure>
    </div></div>
</section>
</div>
<br clear="all">
<div id="photo">
<!--<img src="http://php.shanezentz.com/el-tiene-un-cabeza-de-gato.png" />--><p>test test testtest </p>
</div>
     <div class="zoomzoom"><img src="http://php.shanezentz.com/el-tiene-un-cabeza-de-gato.png" /></div>
     <p>&nbsp;</p>
     <div class="acc">
     <article class="accordion">

	<section id="acc1">
		<h2><a href="#acc1">Title One</a></h2>
		<p>This content appears on page 1.</p>
	</section>
	
	<section id="acc2">
		<h2><a href="#acc2">Title Two</a></h2>
		<p>This content appears on page 2.</p>
	</section>
	
	<section id="acc3">
		<h2><a href="#acc3">Title Three</a></h2>
		<p>This content appears on page 3.</p>
	</section>
       </article></div>

#photo {width:200px;height:200px; background-image:url('http://php.shanezentz.com/el-tiene-un-cabeza-de-gato.png');border-radius:25px;transition: all .5s ease;color:transparent;}
#photo p {text-align:center;margin:15px;font-size:24px;font-weight:bold;text-transform:uppercase;}
#photo:hover p{ /*background-image:none;background-color: red;*/color:black; background-color:rgba(255,255,255,.7); border-radius:15px; border:1px solid black; transition:all .1s ease;}

#blue {
  width:200px;
  height:200px;
  /*margin:0 auto;*/
  border: 1px solid black;
  perspective: 600px;
  perspective-origin: 25% 50%;
  float:left;
  margin-right:40px;
}

#blue .box {
  width:200px;
  height:200px;
  background-color: blue;
  margin:0 auto;
  transform: rotateY( 45deg );
}

.container { 
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
  /*margin:0 auto;*/
  float:left;
  border: 3px solid black;
}
#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  /*transition: transform 1s;
  -moz-transition: transform 1s;
  -o-transition: transform 1s;*/
}

#card {transition: transform 3s;
  -moz-transition: transform 3s;
  -o-transition: transform 3s;}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align:center;
  valign:center;/*??*/
  font-size: 54px;
}

#card .front {
  background: red;
}
#card .back {
  background: blue;
  transform: rotateY( 180deg );

}

.container:hover #card {
  transform: rotateY( 180deg );

}

.container2 { 
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
  float:left;
  margin-left:50px;
  margin-top:0;
  border: 2px solid black;
  background-color:black;
  color:white;
}
#card2 {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -o-transition: transform 1s;
  -ms-transition: transform 1s;
  transform-origin: right center;
}
#card2 figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align:center;
  valign:center;/*??*/
  font-size: 54px;
}

#card2 .front2 {
  background: green;
}
#card2 .back2 {
  background: orange;
  transform: rotateY( 180deg );
}
.container2:hover #card2 {
  transform: rotateY( 180deg );
  transform: translateX( -100% ) rotateY( -180deg );
}

.container3 { 
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
  float:left;
  margin-left:50px;
  margin-top:0;
  border: 2px solid black;
  z-index:500;
}
#card3 {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  /*transition: transform 3s;
  -moz-transition: transform 3s;
  -o-transition: transform 3s;
  -ms-transition: transform 3s;*/
  transform-origin: left center;
}
.container3 #card3{ transition: transform ease-in-out 3s;
  -moz-transition: transform 3s;
  -o-transition: transform 3s;
  -ms-transition: transform 3s;}
#card3 figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align:center;
  valign:center;/*??*/
  font-size: 54px;
}

#card3 .front3 {
  background: olive;
}
#card3 .back3 {
  background: white;
  border: 3px solid black;
  transform: rotateY( 180deg );
  color:black;
}
#card3 .back3 p{font-size:12px;color:white;}
.container3:hover #card3 {
transform: rotateY( -180deg );}


.container3a { 
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
  float:left;
  margin-left:50px;
  margin-top:0;
  border: 2px solid black;
  z-index:500;
}
#card3a {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  /*transition: transform 3s;
  -moz-transition: transform 3s;
  -o-transition: transform 3s;
  -ms-transition: transform 3s;*/
  transform-origin: right center;
}
.container3a #card3a{ transition: transform ease-in-out 3s;
  -moz-transition: transform 3s;
  -o-transition: transform 3s;
  -ms-transition: transform 3s;}
#card3a figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align:center;
  font-size: 54px;
}

#card3a .front3a {
  background: olive;
}
#card3a .back3a {
  background: white;
  border: 3px solid black;
  transform: rotateY( 180deg );
  color:black;
}
#card3a .back3a p{font-size:12px;color:white;}
.container3a:hover #card3a {
transform: rotateY( 180deg );}



.container2a { 
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
  float:left;
  margin-left:50px;
  margin-top:0;
  border: 2px solid black;
  background-color:black;
  color:white;
}
#card2a {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -o-transition: transform 1s;
  -ms-transition: transform 1s;
  transform-origin: right center;
}
#card2a figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align:center;
  valign:center;/*??*/
  font-size: 54px;
}

#card2a .front2a {
  background: green;
}
#card2a .back2a {
  background: orange;
  transform: rotateY( 180deg );
}
.container2a:hover #card2a {
  transform: rotateY( 180deg );
  transform: translateX( -100% ) rotateY( 180deg );
}





.container2b { 
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
  float:left;
  margin-left:50px;
  margin-top:0;
  border: 2px solid black;
  background-color:black;
}
#card2b {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -o-transition: transform 1s;
  -ms-transition: transform 1s;
  transform-origin: left center;
}
#card2b figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align:center;
  valign:center;/*??*/
  font-size: 54px;
}

#card2b .front2b {
  background: yellow;
}
#card2b .back2b {
  background: blue;
  transform: rotateY( 180deg );
}
.container2b:hover #card2b {
  transform: rotateY( 180deg );
  transform: translateX( 100% ) rotateY( -180deg );
}



#cubo{width:200px;height:200px;position:relative;float:left;}
#cubo figure{width:100%;height:100%;position:absolute;}
.cara{background-color:yellow;}
.atras{background-color:red;}
.izquerda{background-color:green;}
.derecho{background-color:blue;}
.arriba{background-color:orange;}
.abajo{background-color:grey;}

#cubo2{width:200px;height:200px;position:relative;float:left;margin-left:10px;}
#cubo2 figure{width:100%;height:100%;position:absolute;}
.cara2{background-color:yellow; float:left;}
.atras2{background-color:red;float:left;}
.izquerda2{background-color:green;float:left;}
.derecho2{background-color:blue;float:left;}
.arriba2{background-color:orange;float:left;}
.abajo2{background-color:grey;float:left;}


/*accordian*/
.acc{margin: 0 auto;width:400px;}
article.accordion
{
	display: block;
	width: 30em;
	padding: 0.5em 0.5em 1px 0.5em;
	margin: 0 auto;
	background-color: #666;
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

article.accordion section
{
	display: block;
	width: 28em;
	height: 2em;
	padding: 0 1em;
	margin: 0 0 0.5em 0;
	color: #333;
	background-color: #333;
	overflow: hidden;
	border-radius: 3px;
}
article.accordion section h2
{
	font-size: 1em;
	font-weight: bold;
	width: 100%;
	line-height: 2em;
	padding: 0;
	margin: 0;
	color: #ddd;
}

article.accordion section h2 a
{
	display: block;
	width: 100%;
	line-height: 2em;
	text-decoration: none;
	color: inherit;
	outline: 0 none;
}
article.accordion section:target
{
	height: 15em;
	background-color: #fff;
}

article.accordion section:target h2
{
	font-size: 1.6em;
	color: #333;
}
article.accordion section,
article.accordion section h2
{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.container25 { 
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
  float:left;
  margin-left:50px;
  margin-top:0;
  border: 2px solid black;
  background-color:black;
  color:white;
  
}
.container25 p { padding: 5px; margin: 5px; }
.out25 {zindex:1001; }
#card25 {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
  -moz-transition: transform 1s;
  -o-transition: transform 1s;
  -ms-transition: transform 1s;
  transform-origin: right center;
}
#card25 figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align:center;
  valign:center;/*??*/
  font-size: 54px;
}

#card25 .front25 {
  background: violet;
}
#card25 .back25 {
  background: purple;
  color:black;
  transform: rotateY( 0deg );
  /*box-shadow: rgba(0,0,0,.3) 5px 5px;*/
}
.container25:hover #card25 {
  transform: rotateX( 0deg );
  transform: translateY( -100% ) rotateY( 0deg );
  /*box-shadow: rgba(0,0,0,.3) 5px 5px;*/
}
.zoomzoom { width:150px;height:150px;margin:10px;padding:3px;border: 1px black solid; overflow:hidden;}
.zoomzoom img:hover {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
}
.zoomzoom img {
    transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    -o-transition: 1s all ease;
	}