This Weebly trick was possibly made while I was reading comments on Weebly's Fan Page. One of the member is asking on how to implement an image flipping effect he found at davidwalsh.name/css-flip. Ok guys, I would like to remind you that the beauty of CSS is most appreciated using the latest version of your browser. I recommend Chrome specifically. So what is the effect?As you can see on the demo, the image flips showing what's in behind either by x or y axis.
1. Ok, the code we will be using comes from one of the comment on David Walsh's article, it was modified to be compatible with chrome and I did a little editing to fit in Weebly.
2. Go to <head>, try the page <head> first. (click here for <head> help)
3. Once you've seen it, just below it or inside its box paste the following code:
<style>
/* simple */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
border: 1px solid #ccc;
}
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: “FlipH”;
}
.flip-container, .front, .back {
width: 320px;
height: 427px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
padding: -5 -5 -5 -5px;
position: absolute;
top: 0;
left: 0;
}
.front {
background: lightgreen;
z-index: 2;
}
.back {
background: lightblue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(logo.png) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
}
/* vertical */
.vertical.flip-container {
position: relative;
}
.vertical .back {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
-webkit-transform-origin: 100% 213.5px;
-moz-transform-origin: 100% 213.5px;
transform-origin: 100% 213.5px;
}
.vertical.flip-container:hover .flipper {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
</style>
/* simple */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
border: 1px solid #ccc;
}
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: “FlipH”;
}
.flip-container, .front, .back {
width: 320px;
height: 427px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
padding: -5 -5 -5 -5px;
position: absolute;
top: 0;
left: 0;
}
.front {
background: lightgreen;
z-index: 2;
}
.back {
background: lightblue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(logo.png) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
}
/* vertical */
.vertical.flip-container {
position: relative;
}
.vertical .back {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
-webkit-transform-origin: 100% 213.5px;
-moz-transform-origin: 100% 213.5px;
transform-origin: 100% 213.5px;
}
.vertical.flip-container:hover .flipper {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
</style>
You can always edit or remove some short tags on the code specially the background used and other elements. Now save it.
4. To apply the HTML on page simply drag one "embed code" and paste the following:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="http://theweeblytricks.weebly.com/files/theme/1.png">
</div>
<div class="back">
<!-- back content -->
<img src="http://theweeblytricks.weebly.com/files/theme/2.png">
</div>
</div>
</div>
<div class="flipper">
<div class="front">
<!-- front content -->
<img src="http://theweeblytricks.weebly.com/files/theme/1.png">
</div>
<div class="back">
<!-- back content -->
<img src="http://theweeblytricks.weebly.com/files/theme/2.png">
</div>
</div>
</div>
The bold text defines the axis on how the image will turn, you can change that to "vertical flip-container" for a vertical effect. As you can see I used an image only for the demo but you can always add more elements like titles and paragraphs. The HTML is divided into two which is for your front content and for the back. Now insert elements on both and experiment.
See, simple isn't it! Post comments if you like, ask questions if you don't get it. Thanks for reading.
So glad to see a post on this topic. Thanks for sharing information on flipping animation effects on photos.TCFC is a animation movie production company that delivers the best results.
ReplyDelete