Pro CSS3 Animation

■ Contents

xi

■ Chapter 9: CSS3 3D Transforms, Transitions, and Animations ������������������������������� 135

Perspective ......................................................................................................................... 135

Rotation .............................................................................................................................. 139

Translate ............................................................................................................................. 140

Card Caption Flip ................................................................................................................ 142

Backface Visibility .............................................................................................................. 144

Transform Style .................................................................................................................. 144

A Circular 3D Gallery .......................................................................................................... 145

Enhancing the Gallery with Level-4 Selectors and JavaScript ........................................... 149

Adding a CSS Level-4 Selector ........................................................................................... 150

3D CSS Transforms and Transitions for UI Elements .......................................................... 151

Summary ............................................................................................................................ 154

■ Chapter 10: Tools, Technologies, and the Future of CSS Animation ������������������������ 155

Writing Effective CSS3 Animations and Transitions: Avoiding Reflows .............................. 155

Automatic Prefixing Tools: Client-Side ............................................................................... 157

-prefix-free ............................................................................................................................................... 157

SASS, LESS, Compass and Codekit ............................................................................................................ 158

Automatic Prefixing Tools: Server-Side .............................................................................. 159

GUI-Based CSS3 Animation Tools ....................................................................................... 159

Sencha Animator ....................................................................................................................................... 159

Adobe Edge Animate.................................................................................................................................. 160

Animatable ................................................................................................................................................ 160

Tumult Hype ............................................................................................................................................... 161

Future Trends: CSS Custom Filters ..................................................................................... 162

Future Trends: Blending and Compositing .......................................................................... 164

Future Trends: Reconciling CSS3 and SVG ......................................................................... 164

Summary ............................................................................................................................ 164

Index ��������������������������������������������������������������������������������������������������������������������������� 167