Ref https://www.zachstronaut.com/projects/rotate3di/#demos
Please refer this code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/zachstronaut/rotate3Di/master/rotate3Di.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.rotate').click(function () { $(this).rotate3Di('toggle', 1000); });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:Repeater ID="dlImages" runat="server">
<ItemTemplate>
<p class="ex_div rotate" style="float: left; margin-bottom: 0px; transform: skewY(0deg) scale(1, 1);">
<img alt="" style='height: 75px; width: 75px' src='<%# Eval("ImageUrl") %>' />
</p>
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>
Namespaces
using System.Data;
C#
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[1] { new DataColumn("ImageUrl") });
dt.Rows.Add("https://www.aspsnippets.com/Demos/SampleImages/JellyFish.jpg");
dt.Rows.Add("https://www.aspsnippets.com/Demos/SampleImages/Koala.jpg");
dt.Rows.Add("https://www.aspsnippets.com/Demos/SampleImages/Tulips.jpg");
dlImages.DataSource = dt;
dlImages.DataBind();
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/zachstronaut/rotate3Di/master/rotate3Di.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.rotate').click(function () { $(this).rotate3Di('toggle', 1000); });
});
</script>
</head>
<body>
<form method="post" action="Default2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg4MDU3NjI2Nw9kFgICAw9kFgICAQ8WAh4LXyFJdGVtQ291bnQCAxYGZg9kFgJmDxUBO2h0dHA6Ly93d3cuYXNwc25pcHBldHMuY29tL0RlbW9zL1NhbXBsZUltYWdlcy9KZWxseUZpc2guanBnZAIBD2QWAmYPFQE3aHR0cDovL3d3dy5hc3BzbmlwcGV0cy5jb20vRGVtb3MvU2FtcGxlSW1hZ2VzL0tvYWxhLmpwZ2QCAg9kFgJmDxUBOGh0dHA6Ly93d3cuYXNwc25pcHBldHMuY29tL0RlbW9zL1NhbXBsZUltYWdlcy9UdWxpcHMuanBnZGQeyNJ5WAuaVUVB46KJkz+lrT1uw2zsxoLqNm/iOqnWyA==" />
</div>
<div>
</div>
<p class="ex_div rotate" style="float: left; margin-bottom: 0px; transform: skewY(0deg) scale(1, 1);">
<img alt="" style='height: 75px; width: 75px' src='http://www.aspsnippets.com/Demos/SampleImages/JellyFish.jpg' />
</p>
<p class="ex_div rotate" style="float: left; margin-bottom: 0px; transform: skewY(0deg) scale(1, 1);">
<img alt="" style='height: 75px; width: 75px' src='http://www.aspsnippets.com/Demos/SampleImages/Koala.jpg' />
</p>
<p class="ex_div rotate" style="float: left; margin-bottom: 0px; transform: skewY(0deg) scale(1, 1);">
<img alt="" style='height: 75px; width: 75px' src='http://www.aspsnippets.com/Demos/SampleImages/Tulips.jpg' />
</p>
</form>
</body>
</html>
Demo
