CSS in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

CSS3 Image Flips

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

Flip an image horizontal with CSS3

TRANSITIONS & 3D TRANSFORMS
To follow up from the last page where we worked with transitions and 2D transforms this time
we'll us 3D transform. This again is with CSS3 and built into the new browsers.
3D Transform sholud work in IE10 and all the normal browsers IE9 and lower you just see the image change.

The transition is the effect that slows it down when it flips

Put an HTML object on your page and make it look like 1.jpg

Name your (same size) images 1.jpg & 2.jpg and
attach them to
"website properties"

DOUBLE CLICK on the "HTML object" copy/paste this.

<div class="panel">
<div class="front card"></div>
<div class="back card"></div>
</div>

<style type="text/css">
.panel {width: 100%;height: 100%;margin: auto;position: relative;}
.card {width: 100%;height: 100%;-o-transition: all 1.0s linear;-ms-transition: all 1.0s linear;-moz-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;transition: all 1.0s linear;-webkit-backface-visibility: hidden;-ms-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;position: absolute;top: 0px;left: 0px;}
.front {z-index: 2;}
.back {z-index: 1;-webkit-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg); transform: rotateY(-180deg);}
.panel:hover .front {z-index: 1;-webkit-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);}
.panel:hover .back {z-index: 2; -webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-moz-transform: rotateY(0deg);transform: rotateY(0deg);}
.front{background-image: url(1.jpg);}
.back{background-image: url(2.jpg);}
</style>

On the HTML tab in "Insert Page HTML"
copy/paste this "Inside HEAD"

Preview in an up date browser like firefox or chrome

1.jpg & 2.jpg are the images you attached
they need to be the same size

Flip an image vertical with CSS3

TRANSITIONS & 3D TRANSFORMS
This is the same as above but this time we'll flip it the other way.
This again is with CSS3 and built into the new browsers.
3D Transform sholud work in IE10 and all the normal browsers IE9 and lower you just see the image change.

The transition is the effect that slows it down when it flips

Put an HTML object on your page and make it look like 1.jpg

Name your (same size) images 1.jpg & 2.jpg and
attach them to
"website properties"

DOUBLE CLICK on the "HTML object" copy/paste this.

<div class="panel2">
<div class="front2 card2"></div>
<div class="back2 card2"></div>
</div>

<style type="text/css">
.panel2 {width: 100%;height: 100%;margin: auto;position: relative;}
.card2 {width: 100%;height: 100%;-o-transition: all 1.0s linear;-ms-transition: all 1.0s linear;-moz-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;transition: all 1.0s linear;-webkit-backface-visibility: hidden;-ms-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;position: absolute;top: 0px;left: 0px;}
.front2 {z-index: 2;}
.back2 {z-index: 1;-webkit-transform: rotateX(-180deg);-ms-transform: rotateX(-180deg);-moz-transform: rotateX(-180deg); transform: rotateX(-180deg);}
.panel2:hover .front2 {z-index: 1;-webkit-transform: rotateX(180deg);-ms-transform: rotateX(180deg);-moz-transform: rotateX(180deg);transform: rotateX(180deg);}
.panel2:hover .back2 {z-index: 2; -webkit-transform: rotateX(0deg);-ms-transform: rotateX(0deg);-moz-transform: rotateX(0deg);transform: rotateX(0deg);}
.front2{background-image: url(1.jpg);}
.back2{background-image: url(2.jpg);}
</style>

On the HTML tab in "Insert Page HTML"
copy/paste this "Inside HEAD"

1.jpg & 2.jpg are the images you attached
they need to be the same size

Preview in an up date browser like firefox or chrome

Flip an image horizontal with CSS3 and Put Text on the Back

TRANSITIONS & 3D TRANSFORMS
This one is the same as the above two but we'll use text instead of an image on the back division this time
This again is with CSS3 and built into the new browsers.
3D Transform should work in IE10 and all the normal browsers IE9 and lower you just see the image change.

The transition is the effect that slows it down when it flips

P40 War Hawk
The P-40, ugly but beautiful, flew on all fronts during the war and was particularly outstanding in the Pacific.
The fighter was famous in China before the U.S. entered the war. The American Volunteer Group (AVG) of pilots called the "flying Tigers" 1941-42, won 286 victories against 26 losses. They were the first to paint their P-40s with the well recognized shark's teeth.

Put an HTML object on your page and make it look like 1.jpg

Name your image 1.jpg and
attach it to
"website properties"

DOUBLE CLICK on the "HTML object" copy/paste this.

<div class="panel3">
<div class="front3 card3"></div>
<div class="back3 card3">
<P>TITLE
<BR>
Put your text here
</P>
</div>
</div>

<style type="text/css">
.panel3 {width: 100%;height: 100%;margin: auto;position: relative;}
.card3 {width: 100%;height: 100%;-o-transition: all 1.0s linear;-ms-transition: all 1.0s linear;-moz-transition: all 1.0s linear;-webkit-transition: all 1.0s linear;transition: all 1.0s linear;-webkit-backface-visibility: hidden;-ms-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;position: absolute;top: 0px;left: 0px;}
.front3 {z-index: 2;}
.back3 {z-index: 1;-webkit-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg); transform: rotateY(-180deg);}
.panel3:hover .front3 {z-index: 1;-webkit-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);}
.panel3:hover .back3 {z-index: 2; -webkit-transform: rotateY(0deg);-ms-transform: rotateY(0deg);-moz-transform: rotateY(0deg);transform: rotateY(0deg);}
.front3{background-image: url(1.jpg);}
.back3{background-color: black; color:white; text-align:center; font:14px verdana;}
</style>

On the HTML tab in "Insert Page HTML"
copy/paste this "Inside HEAD"

1.jpg is the image you attached
they need to be the same size
black is the background color
white is the text color

Preview in an up date browser like firefox or chrome

Thank-you

CSS in Web Studio 5 - CSS3 image flips using transitions - by Web Studio Next

aaaaaaaaaaaaiii