最新强大的CSS 与 JavaScript 技术

   <p><a href="/misc/goto?guid=4958347600864631236">Interactive CSS3 lighting effects</a><br /> An interesting effect to create interactive lighting effects with 3-D transforms, CSS gradients and masks; the cast shadow was created using box shadows and transforms.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347600864631236"><img class="alignnone size-full wp-image-133580" title="Interactive CSS3 Lighting Effects" alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/d2e70b905b834a06dd19d641be1118a8.jpg" width="498" height="298" /></a></p>    <p><a href="/misc/goto?guid=4958347602384302690">CSS3 dodecahedron</a><br /> A fancy dodecahedron experiment, created using CSS Transforms and a tiny JavaScript snippet.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347602384302690"><img class="alignnone size-full wp-image-133504" title="CSS3 Dodecahedron" alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/93536dfd2f0c7d70d529c3a0a073116f.jpg" width="498" height="298" /></a></p>    <p><a href="/misc/goto?guid=4958346891307100925">CSS 3D Lighting Engine Photon</a><br /> Our editor Tom Giannattasio has created a JavaScript library that adds simple lighting effects to DOM elements in 3D space using the WebKitCSSMatrix object. It would be great to have an implementation for other rendering engines as well.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958346891307100925"><img alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/f27a69c17eb16b205170aeac25234b4c.jpg" width="551" height="409" /></a></p>    <p><a href="/misc/goto?guid=4958347605398486819">3D Thumbnail Hover Effects With CSS</a><br /> This technique produces 3D thumbnail hover effects with CSS 3D transforms. The code is quite verbose and probably could be optimized, but the effect is quite neat.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347605398486819"><img alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/a35b0b77ccf5eb36a6dcc173e3fe9849.jpg" width="498" height="317" /></a></p>    <p><a href="/misc/goto?guid=4958347606932087845">Slide In Image Boxes</a><br /> A technique for creating a “slide in” effect for boxes on hover to make them a bit more interactive.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347606932087845"><img alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/0abdd57a71d24473591682be48b5dfd1.jpg" width="500" height="278" /></a></p>    <p><a href="/misc/goto?guid=4958347608458930216">CSS3 bitmap graphics</a><br /> The bitmap graphics is rendered with CSS: no images, no <code>canvas</code>, no data URIs and no extra markup. The pixels are drawn with CSS gradients, sized precisely to the pixel’s boundaries.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347608458930216"><img class="alignnone size-full wp-image-133568" title="Pure CSS3 Bitmap Graphics" alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/2520837eb911de01ecb4ae230c584f3a.jpg" width="498" height="298" /></a></p>    <p><a href="/misc/goto?guid=4958347609989861186">Paperfold CSS</a><br /> A visual folding effect for hidden comments by Felix Niklas. The plugin takes a DOM element, slices it into parts and arranges them like a folded paper in 3-D space.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347609989861186"><img class="alignnone size-full wp-image-133623" title="Paperfold CSS" alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/7f5783022e55fe6bd6e89691a2c8fdb0.jpg" width="500" height="300" /></a></p>    <p><a href="/misc/goto?guid=4958347611523186173">Beercamp: An Experiment With CSS 3D</a><br /> A CSS 3D popup book á la Dr. Seuss. The website was a test to see how far SVG and CSS 3D transforms could be pushed. This is the article about it.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347611523186173"><img class="alignnone size-full wp-image-133655" title="Beercamp: An Experiment With CSS 3D" alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/48bb8ee6c3deb3a05e97e1b2dcc999e9.jpg" width="500" height="300" /></a></p>    <p><a href="/misc/goto?guid=4958347613070200758">Covers: A JS / CSS Experiment</a><br /> Now, that’s quite an experiment: what if we combined a music song, stylesheet and beat detector to create animated… covers? Sure, we can do it with CSS3 and JavaScript! Covers does exactly that. The result is interesting, what can you do with this approach?</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347613070200758"><img alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/5f66ae38b1c368c2e5eec94fca6426f0.jpg" width="498" height="412" /></a></p>    <p><a href="/misc/goto?guid=4958347614595567305">Animation on Apple’s page</a><br /> John B. Hall explains the CSS animation on Apple’s Web page for the iPhone 4S.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347614595567305"><img class="alignnone size-full wp-image-133349" title="An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall" alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/9dbdf5e17d30552381a6dee9a7af72ca.jpg" width="498" height="298" /></a></p>    <p><a href="/misc/goto?guid=4958323708108492546">Experimental animations for image transitions</a><br /> A post about experimental 3-D image transitions that use CSS3 animations and jQuery. Only CSS3 transforms are used.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958323708108492546"><img class="alignnone size-full wp-image-133576" title="Experimental CSS3 Animations for Image Transitions" alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/e486d2eea9ec4f5db795f9b5c1a363b2.jpg" width="500" height="300" /></a></p>    <p><a href="/misc/goto?guid=4958347617587205302">Maintaining CSS style states using “infinite” transition delays</a><br /> This demo allows you to move the character around with the D-pad, and notice how it always keeps its position after you stop moving. This demo doesn’t use any JavaScript. The effect is made possible by using a virtually infinite transition delay, so that the CSS rules never return to their default state. The figure will be stuck in a transition and will move only when you hold down a button.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347617587205302"><img class="alignnone size-full wp-image-133473" title="Maintaining CSS Style States using “Infinite” Transition Delays" alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/f32c490b1c0e00af6879dc73ac7c1e09.jpg" width="498" height="298" /></a></p>    <p><a href="/misc/goto?guid=4958347619124700487">CSS 3-D clouds</a><br /> An experiment in creating 3-D-like clouds with CSS3 transforms and a bit of JavaScript.</p>    <p class="showcase"><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347619124700487"><img class="alignnone size-full wp-image-133478" title="CSS3D Clouds" alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/84fe3e632781876e74fcc6be807dd0db.jpg" width="500" height="281" /></a></p>    <p><a href="/misc/goto?guid=4958347620657016045">Animated popover of profile box</a><br /> A technique for an animated profile popover menu, built using CSS transitions. </p>    <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958347620657016045"><img alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/797d9f36c6732cc6bbec8dddb529b89f.jpg" width="500" height="220" /></a></p>    <p><a href="/misc/goto?guid=4958340505014003950">CSS3 scrolling effects</a><br /> A library of various scrolling effects, such as curl, wave, flip, fly, skew and helix, created with CSS3 and sometimes with JavaScript to spice up the scrolling behavior.</p>    <p><a style="border-bottom:medium none;border-left:medium none;border-top:medium none;border-right:medium none;" href="/misc/goto?guid=4958340505014003950"><img alt="最新强大的CSS 与 JavaScript 技术" src="https://simg.open-open.com/show/a1df58f746bcfe8f5d0405fc85430666.jpg" width="540" height="350" /></a></p>    <p><a href="/misc/goto?guid=4958347623665802738">Spin those icons with CSS3</a><br /> A simple technique for creating a neat effect that spins social icons with the help of a transform and transition when you hover over them. By Tom Kenny.</p>    <p><a href="/misc/goto?guid=4958347624483786160">Scrolling the Z Axis with CSS 3D Transforms</a><br /> This article explains how to create the z-scroll effect step by step.</p>