rotating box in html css

3D Translate   

http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Elements may also be translated on the z axis using the translateZ value. A negative value here will push an element further away on the z axis, resulting in a smaller element. Using a positive value will pull an element closer on the z axis, resulting in a larger element.
While this may appear to be very similar to that of the two-dimensional transform scale value, it is actually quite different. The transform is taking place on the z axis, not the x or y axes. When working with three-dimensional transforms, being able to move an element on the z axis does have great benefits, like when building the cube below for example.

HTML

1 2	<figure class="box-1">Box 1</figure> <figure class="box-2">Box 2</figure>

CSS

1 2 3 4 5 6

.box-1 { transform: perspective(200px) translateZ(-50px); } .box-2 { transform: perspective(200px) translateZ(50px); }

3D Translate Demo

 

http://learn.shayhowe.com/advanced-html-css/css-transforms/

 http://codepen.io/shayhowe/pen/msBJC

http://codepen.io/HugoGiraudel/pen/fvopl 

HTML

1 2 3 4

<div class="container"> <section>...</section> <aside>...</aside> </div>

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.container { width: 538px; } section, aside { margin: 10px; } section { float: left; width: 340px; } aside { float: right; width: 158px; }

Fixed Grid Demo

 http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

http://codepen.io/RavingAPD/pen/CLsmj 

 BEST CSS USING VIDEO

http://codepen.io/dudleystorey/pen/knqyK 

on mouse click  NET 

http://codepen.io/suffick/pen/KrAwx

design like news paper

http://codepen.io/silkine/pen/jldif

CSS BEST DESIGN 

http://codepen.io/austinteer/pen/AwhyL

JSFiddle

JSFiddle was one of the earliest code playgrounds and a major influence for all which followed. Despite the name, it can be used for any combination of HTML, CSS and JavaScript testing. It’s looking a little basic today, but still offers advanced functionality such as Ajax simulation.

CodePen

The prize for the best-looking feature-packed playground goes to CodePen. The service highlights popular demonstrations (“Pens”) and offers advanced functionality such as sharing and embedding. The PRO service provides cross-browser testing, pair-programming and teaching options for just $9 per month.

CSS Deck

This may be named CSS Deck, but it’s a fully-fledged HTML, CSS and JavaScript playground with social and collaboration features. It’s similar to CodePen (I don’t know who influenced who!) but you might prefer it.

JS Bin

JS Bin was started by JS guru Remy Sharp. It concentrates on the basics and handles them exceedingly well. As far as I’m aware, it’s also the only option which offers a JavaScript console. Recommended.

Dabblet

Another early playground, Dabblet started life as an HTML5/CSS3 demonstration system by Lea Verou but it’s recently received JavaScript facilities. It looks gorgeous and has one killer feature — browser CSS prefixes are added automatically. There’s no need to enter that -webkit, -moz and -ms nonsense yourself.

Tinkerbin

Tinkerbin is an alpha release and one of the simpler options here. It may not offer features above and beyond the alternatives but it’s attractive and functional.

Liveweave

Liveweave is slightly unusual in that it places your HTML, CSS and JavaScript into a single file. It’s not possible to share your creation, but you can download the result and store or open it locally. It’s ideal for quick and dirty private experimentation.
I guess I missed your favorite?…
Comments on this article are closed. Have a question about Web Design? Why not ask it on our forums