CSS3 Small Icon Tip effect

hurry up to the example

<! DOCTYPE html>
/* Next is each sub-section, ROTATWD rotation angle scale scaling translate panning which adds 3d is let him do 3d transformation, of course, there is a 2  D. */
Span.content1{transform-origin:center Bottom;-webkit-transform-origin:center Bottom;transform:rotate3d ( 1,1,1,60DEG);-webkit-transform:rotate3d (1,1,1,60deg);} Span.content1 I{transform:scale3d (0.01,0.01,1);-webkit-transform:scale3d (0.01,0.01,1);} Span.content2{transform-origin:center Bottom;-webkit-transform-origin:center Bottom;transform:translate3d (0,20px , 0);-webkit-transform:translate3d (0,20px,0);} Span.content2 I{transform:translate3d (0,10px,0);-webkit-transform:translate3d (0,10px,0);} Span.content3{transform-origin:center Bottom;-webkit-transform-origin:center Bottom;transform:rotate3d ( 0,1,0,90DEG) Translate3d (0,8px,0);-webkit-transform:rotate3d (0,1,0,90deg) Translate3d (0,8px,0);} Span.content3 I{transform:translate3d (0,-2px,0);-webkit-transform:translate3d (0,-2px,0);} Span.content4{transform:translate3d (0,-12px,0);-webkit-transform:translate3d (0,-12px,0);} Span.content4 I{transform:translate3d (0,12px,0);-webkit-transform:translate3d (0,12px,0);} Span.content5{transform:scale (0.01) TRAnslate3d (0,10px,0);/* The most important thing is that scale if you shrink it to 0, it may happen without effect, and you can try it, so make it as 0,01*/-webkit-transform:scale as possible (0.01) Translate3d (0,10px,0);} SPAN.CONTENT5 I{transform:translate3d (0,20px,0);-webkit-transform:translate3d (0,20px,0);} </style>
More CSS3 small icon tip effects related articles please follow topic.alibabacloud.com!

