Dev Stack Source

Answer : there are some advanced examples like these: http://x.dtott.com/3d/ http://cssdeck.com/labs/pure-css-3d-primitives and some useful CSS shapes like these: http://css-tricks.com/examples/ShapesOfCSS/ personally I built this simple one HTML <div class="tank"> <div class="bottom"></div> <div class="middle"></div> <div class="top"></div> </div> and CSS .tank{ position:relative; margin:50px; } .tank .middle{ width:120px; height:180px; background-color:#444; position:absolute; } .tank .top{ width: 120px; height: 50px; background-color:#666; -moz-border-radius: 60px / 25px; -webkit-border-radius: 60px / 25px; border-radius: 60px / 25px; position:absolute; top:-25px; } .tank .bottom{ width: 120px; height: 50px; background-color:#444; -moz-border-radius: 60px / 25px; -webkit-border-radius: 60px / 25px; bo...

Answer : .red.box { background-color: red; transform: perspective( 600px ) rotateY( 45deg ); } Then HTML: <div class="box red"></div> from http://desandro.github.com/3dtransforms/docs/perspective.html I think you mean webkit transform.. please check this URL out http://www.the-art-of-web.com/css/3d-transforms/ it could help you. CSS: #box { width: 200px; height: 200px; background: black; position: relative; -webkit-transition: all 300ms ease-in; } #box:hover { -webkit-transform: rotate(-180deg) scale(0.8); } #box:after, #box:before { display: block; content: "\0020"; color: transparent; width: 211px; height: 45px; background: white; position: absolute; left: 1px; bottom: -20px; -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); } #box:before { bottom: auto; top: -20px; -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); }​ HTML: <div...

Answer : The native dashed border property value does not offer control over the dashes themselves... so bring on the border-image property! Brew your own border with border-image Compatibility : It offers great browser support (IE 11 and all modern browsers). A normal border can be set as a fallback for older browsers. Let's create these These borders will display exactly the same cross-browser! Step 1 - Create a suitable image This example is 15 pixels wide by 15 pixels high and the gaps are currently 5px wide. It is a .png with transparency. This is what it looks like in photoshop when zoomed in: This is what it looks like to scale: Controlling gap and stroke length To create wider / shorter gaps or strokes, widen / shorten the gaps or strokes in the image. Here is an image with wider 10px gaps: correctly scaled = Step 2 - Create the CSS — this example requires 4 basic steps Define the border-image-source: border-image-source:url("http://i.stack.imgur.com/wLdVc.png...