How to rotate an image in visualforce page
Sample VF Code:
<apex:page showHeader="false" sidebar="false">
<html>
<head>
<title>Image Rotation</title>
<style>
body {
background: gold;
}
.loadingImage {
border-top:5px solid green;
border-bottom:5px solid green;
border-left:5px solid green;
border-right:5px solid green;
border-radius:50%;
left:45%;
top:25%;
width:200px;
height:200px;
background:black;
animation:spin 10s linear infinite;
position:absolute;
}
.circularImage {
border-radius:50%;
width:200px;
height:200px;
}
@-webkit-keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<p style="font-size: 18px;text-align: center;color: green;"> Image is Rotating in Visualforce Page</p>
<br/>
<div>
<img class="loadingImage circularImage" src="Logo URL"/>
</div>
</div>
</body>
</html>
</apex:page>
Output:
Demo
Sample VF Code:
<apex:page showHeader="false" sidebar="false">
<html>
<head>
<title>Image Rotation</title>
<style>
body {
background: gold;
}
.loadingImage {
border-top:5px solid green;
border-bottom:5px solid green;
border-left:5px solid green;
border-right:5px solid green;
border-radius:50%;
left:45%;
top:25%;
width:200px;
height:200px;
background:black;
animation:spin 10s linear infinite;
position:absolute;
}
.circularImage {
border-radius:50%;
width:200px;
height:200px;
}
@-webkit-keyframes spin {
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<p style="font-size: 18px;text-align: center;color: green;"> Image is Rotating in Visualforce Page</p>
<br/>
<div>
<img class="loadingImage circularImage" src="Logo URL"/>
</div>
</div>
</body>
</html>
</apex:page>
Output:
Demo
No comments:
Post a Comment