<style>* { margin:0; padding:0;}. AA { width:220px; height:220px; margin:0 Auto; Background:no-repeat URL ("Images/author.jpg") left top; -webkit-background-size:220px 220px; -moz-background-size:220px 220px; background-size:220px 220px; -webkit-border-radius:110px; border-radius:110px; -webkit-transition:-webkit-transform 2s ease-out; -moz-transition:-moz-transform 2s ease-out; -o-transition:-o-transform 2s ease-out; -ms-transition:-ms-transform 2s ease-out;}. Aa:hover { -webkit-transform:rotatez (360deg);/*transform transition and corner radians Border-radius to consider compatibility issues */ -moz-transform:rotatez (360deg); -o-transform:rotatez (360deg); -ms-transform:rotatez (360deg); Transform:rotatez (360deg);} </style><body><p class= "AA" ></p></body>The second type: Photo wall suspension Effect
<style>body{font-family:tahoma,helvetica, "\5b8b\4f53", "Arial", Sans-serif;font-size:12px;color: #fff;} Body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th , td{margin:0;padding:0} input,button,textarea{border:none 0} fieldset,img{border:0} table {border-collapse:collapse;border-spacing:0} Ul,ol{list-style:none} A:link{text-decoration:none} A:visited{text-decoration:none} A:hover{text-decoration:none}. clear{zoom:1} . Clear:after{content: "";d isplay:block;clear:both}/* Polaroids */.polaroids{width:100%;margin:0 0 18px 10px;}. Polaroids Li{display:inline;}. Polaroids a{background: #fff;d isplay:inline;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align:center;font-family: "Marker Felt", Sans-serif; Text-decoration:none;color: #333; font-size:18px;-webkit-box-shadow:0 3px 6px Rgba (0,0,0,.);-moz-box-shadow:0 3px 6px Rgba (0,0,0,.25);-o-box-shadow:0 3px 6px Rgba (0,0,0,.25); box-shadow:0 3px 6px Rgba (0,0,0,.25);}. Polaroids img{display:block;width:190px;margin-bottom:12px;}. Polaroids a:after{content:attr (title);/* Ie8+,ff,chorme,safari */}.polaroids li:nth-child (even) a{-webkit-transform : Rotate (2DEG); -moz-transform:rotate (2DEG); -ms-transform:rotate (2DEG); Transform:rotate (2deg);}. Polaroids li:nth-child (3n) a{-webkit-transform:none; -moz-transform:none; -ms-transform:rotate (2DEG); Transform:none; position:relative; top:-5px;}. Polaroids li:nth-child (5n) a{-webkit-transform:rotate (5deg); -moz-transform:rotate (5DEG); -ms-transform:rotate (5DEG); Transform:rotate (5DEG); position:relative; right:5px;}. Polaroids li:nth-child (8n) a{position:relative; top:8px; right:5px;}. Polaroids li:nth-child (11n) a{position:relative; top:3px; right:-5px;}. Polaroids Li a:hover{-webkit-transform:scale (1.25); -moz-Transform:scale (1.25); -ms-transform:scale (1.25); Transform:scale (1.25); -webkit-box-shadow:0 3px 6px Rgba (0,0,0,.5); -moz-box-shadow:0 3px 6px Rgba (0,0,0,.5); -o-box-shadow:0 3px 6px Rgba (0,0,0,.5); box-shadow:0 3px 6px Rgba (0,0,0,.5); position:relative; Z-index:5;}. Polaroids Li.messy a{margin-top:-375px;margin-left:160px; -webkit-transform:rotate ( -5DEG); -moz-transform:rotate ( -5DEG); -ms-transform:rotate ( -5DEG); Transform:rotate ( -5deg);} </style><body><ul class= "Polaroids" > <li><a href= "#" title= "Roelan" ></a></li> <li><a href= "#" title= "Discus" ></a></li> <li><a href=" # "title=" a Hear "></a></li> <li><a href= "#" title= "Evil M" ></a></li> <li><a href=" # "title=" Scribb ">< IMG src= "images/image-01.jpg" alt= "scribbles" ></a></li> <li><a href= "#" title= "Amanda" & Gt;</a></li> <li><a href= "#" T Itle= "The Do" ></a></li> <li>< A href= "#" title= "I See" ></a></li> <li><a href= "#" title= "Rock H" ></a></li> <li><a href=" # "title=" bocce "></a></li> <li><a href=" # "title=" Boris "></a></li> <li><a href= "#" title= "Sneake" ></ a></li> </ul> <ul class= "Polaroids" style= "width:280px;" > <li><a href= "#" title= "Roelan" ></a></li> <li><a href= "#" title= "Discus" ></a></li> <li class=" messy "><a href=" # "title=" a Hear "></a></li> </ul></body>
Related articles:
Simply make HTML5 page effect text effects
CSS example code for 3D cube rotation effects
Details on how the HTML5 3D clothes rocking animation effects are implemented
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
