Archive for the Transforms Category

Adobe’s Web Platform team recently showcased a prototype demonstrating the future of digital layout on the web using content provided to us by National Geographic. Although the experience is fully responsive (meaning it adapts to screens of all sizes), we decided to push things a little further by creating an entirely new — and much... Continue reading →

To get some experience working with and optimizing CSS 3D transformations, we decided to build an HTML screensaver demo (GitHub repo). Here’s how it works: Open the demo in any modern browser with proper 3D CSS transformation support (Chrome, Safari, or Firefox). Choose your favorite image sharing services (Flickr, 500px, Instagram, or Dribbble). Watch the... Continue reading →

The Quest for the Graphical Web was an experimental presentation we put together to tell the story of how the web is evolving from a graphical perspective. You can watch the full recording of the presentation from the Create the Web event.  A web version can be viewed online at thegraphicalweb.com.  We’ve also open-sourced the... Continue reading →

As you can probably tell from the constant posts, we over at the Web Platform team like to talk about our work. After all, we think the contributions we’re making to the web are pretty cool. But we only know we’re making a difference when the community at large starts talking. The following is a... Continue reading →

Recently there was a discussion in the SVG working group how SVG Animations (based on SMIL Animations), CSS3 Animations and CSS3 Transitions contribute to the animation sandwich model for SVG presentation attributes. SVG presentation attributes First, what are SVG presentation attributes? In SVG, a subset of all CSS properties can be set by SVG attributes.... Continue reading →

Much effort is being invested in improving the integration of CSS and SVG.  Recently Dirk Schulze and Hans Muller added SVG support for the CSS transform-origin property to WebKit. Hans has written an article about transform-origin in general and about the new SVG support here. If your web pages and applications incorporate non-trivial graphics or... Continue reading →

With the addition of CSS transitions and transforms, web developers can create interactive content with relatively simple markup. Understanding how to use these features with SVG, which has its own transform and animation systems, can be a little difficult. For example, let’s take a look at a simple interactive element, which animates its color and... Continue reading →