Is it possible to apply a random CSS rotation to an image just once, rather than having it continuously spin when hovering over a leaflet map?
http://jsfiddle.net/J03rgPf/mzwwfav4/3/
I want the random CSS rotation to be set only one time. How can I achieve this without calling the getRandRot function repeatedly?
<body ng-controller="DemoController">
<leaflet center="center"></leaflet>
<div class="{{getRandRot()}}">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Surfers_at_Mavericks.jpg/320px-Surfers_at_Mavericks.jpg" />
</div>
</body>
Angular JS Code:
var app = angular.module('demoapp',['leaflet-directive']);
app.controller('DemoController', [ '$scope', 'leafletData', function($scope, leafletData) {
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 5
}
})
$scope.getRandRot = function(){
var rotations = [ "rotate-10", "rotate-5", "rotate5", "rotate10" ];
var rand = Math.floor(Math.random() * rotations.length);
return rotations[rand];
}
}]);
CSS
.angular-leaflet-map {
width: 100%;
height: 280px;
}
.rotate-10{
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
.rotate-5{
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.rotate5{
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.rotate10{
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}