dimanche 31 août 2014

flipcard within angularjs directive with limited scope


Vote count:

0




I have this html code with CSS. I want to put this in a directive template and re-use the directive, limiting scope to each element.



<div ng-controller="flipCtrl">
<div class="flip"> <div class="card" ng-class="{'flipped':isFlipped}" ng-click="isFlipped=!isFlipped">
<div class="face front">Project</div>
<div class="face back">TechLead</div>
</div>
</div>
</div>


I am not able to get it to work when I copy the entire text in the html into the template of directive.


the idea is that each flipcard will flip when clicked on it.


CSS



<style>
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
</style>


asked 1 min ago







flipcard within angularjs directive with limited scope

Aucun commentaire:

Enregistrer un commentaire