Contents
About ................................................................................................................................................................................... 1
Chapter 1: Getting started with CSS .................................................................................................................... 2
Section 1.1: External Stylesheet ..................................................................................................................................... 2
Section 1.2: Internal Styles ............................................................................................................................................ 3
Section 1.3: CSS @import rule (one of CSS at-rule) ................................................................................................... 3
Section 1.4: Inline Styles ................................................................................................................................................. 4
Section 1.5: Changing CSS with JavaScript ................................................................................................................. 4
Section 1.6: Styling Lists with CSS ................................................................................................................................. 5
Chapter 2: Structure and Formatting of a CSS Rule .................................................................................. 7
Section 2.1: Property Lists ............................................................................................................................................. 7
Section 2.2: Multiple Selectors ...................................................................................................................................... 7
Section 2.3: Rules, Selectors, and Declaration Blocks ............................................................................................... 7
Chapter 3: Selectors .................................................................................................................................................... 8
Section 3.1: Basic selectors ........................................................................................................................................... 8
Section 3.2: Attribute Selectors .................................................................................................................................... 8
Section 3.3: Combinators ............................................................................................................................................ 11
Section 3.4: Pseudo-classes ....................................................................................................................................... 12
Section 3.5: Child Pseudo Class .................................................................................................................................. 14
Section 3.6: Class Name Selectors ............................................................................................................................. 14
Section 3.7: Select element using its ID without the high specificity of the ID selector ........................................ 15
Section 3.8: The :last-of-type selector ....................................................................................................................... 16
Section 3.9: CSS3 :in-range selector example .......................................................................................................... 16
Section 3.10: A. The :not pseudo-class example & B. :focus-within CSS pseudo-class ......................................... 16
Section 3.11: Global boolean with checkbox:checked and ~ (general sibling combinator) .................................. 18
Section 3.12: ID selectors ............................................................................................................................................. 19
Section 3.13: How to style a Range input .................................................................................................................. 19
Section 3.14: The :only-child pseudo-class selector example ................................................................................. 20
Chapter 4: Backgrounds ......................................................................................................................................... 21
Section 4.1: Background Color ................................................................................................................................... 21
Section 4.2: Background Gradients ........................................................................................................................... 23
Section 4.3: Background Image ................................................................................................................................. 24
Section 4.4: Background Shorthand .......................................................................................................................... 25
Section 4.5: Background Size ..................................................................................................................................... 26
Section 4.6: Background Position .............................................................................................................................. 30
Section 4.7: The background-origin property .......................................................................................................... 31
Section 4.8: Multiple Background Image .................................................................................................................. 33
Section 4.9: Background Attachment ....................................................................................................................... 33
Section 4.10: Background Clip .................................................................................................................................... 34
Section 4.11: Background Repeat ............................................................................................................................... 35
Section 4.12: background-blend-mode Property ..................................................................................................... 36
Section 4.13: Background Color with Opacity ........................................................................................................... 36
Chapter 5: Centering ................................................................................................................................................. 38
Section 5.1: Using Flexbox ........................................................................................................................................... 38
Section 5.2: Using CSS transform .............................................................................................................................. 39
Section 5.3: Using margin: 0 auto; ............................................................................................................................. 40
Section 5.4: Using text-align ....................................................................................................................................... 41
Section 5.5: Using position: absolute ......................................................................................................................... 41
, Section 5.6: Using calc() ............................................................................................................................................. 42
Section 5.7: Using line-height ..................................................................................................................................... 42
Section 5.8: Vertical align anything with 3 lines of code ......................................................................................... 43
Section 5.9: Centering in relation to another item ................................................................................................... 43
Section 5.10: Ghost element technique (Michał Czernow's hack) ........................................................................... 44
Section 5.11: Centering vertically and horizontally without worrying about height or width ............................... 45
Section 5.12: Vertically align an image inside div ..................................................................................................... 46
Section 5.13: Centering with fixed size ....................................................................................................................... 46
Section 5.14: Vertically align dynamic height elements .......................................................................................... 48
Section 5.15: Horizontal and Vertical centering using table layout ........................................................................ 48
Chapter 6: The Box Model ...................................................................................................................................... 50
Section 6.1: What is the Box Model? .......................................................................................................................... 50
Section 6.2: box-sizing ................................................................................................................................................ 51
Chapter 7: Margins ..................................................................................................................................................... 54
Section 7.1: Margin Collapsing .................................................................................................................................... 54
Section 7.2: Apply Margin on a Given Side ............................................................................................................... 56
Section 7.3: Margin property simplification .............................................................................................................. 57
Section 7.4: Horizontally center elements on a page using margin ...................................................................... 57
Section 7.5: Example 1: ................................................................................................................................................ 58
Section 7.6: Negative margins ................................................................................................................................... 58
Chapter 8: Padding .................................................................................................................................................... 60
Section 8.1: Padding Shorthand ................................................................................................................................. 60
Section 8.2: Padding on a given side ........................................................................................................................ 61
Chapter 9: Border ....................................................................................................................................................... 62
Section 9.1: border-radius ........................................................................................................................................... 62
Section 9.2: border-style ............................................................................................................................................. 63
Section 9.3: Multiple Borders ...................................................................................................................................... 64
Section 9.4: border (shorthands) ............................................................................................................................... 65
Section 9.5: border-collapse ...................................................................................................................................... 65
Section 9.6: border-image .......................................................................................................................................... 66
Section 9.7: Creating a multi-colored border using border-image ........................................................................ 66
Section 9.8: border-[left|right|top|bottom] ............................................................................................................... 67
Chapter 10: Outlines .................................................................................................................................................. 68
Section 10.1: Overview ................................................................................................................................................. 68
Section 10.2: outline-style ........................................................................................................................................... 68
Chapter 11: Overflow ................................................................................................................................................. 70
Section 11.1: overflow-wrap ......................................................................................................................................... 70
Section 11.2: overflow-x and overflow-y .................................................................................................................... 71
Section 11.3: overflow: scroll ........................................................................................................................................ 72
Section 11.4: overflow: visible ...................................................................................................................................... 72
Section 11.5: Block Formatting Context Created with Overflow .............................................................................. 73
Chapter 12: Media Queries ...................................................................................................................................... 75
Section 12.1: Terminology and Structure ................................................................................................................... 75
Section 12.2: Basic Example ....................................................................................................................................... 76
Section 12.3: mediatype .............................................................................................................................................. 76
Section 12.4: Media Queries for Retina and Non Retina Screens ........................................................................... 77
Section 12.5: Width vs Viewport ................................................................................................................................. 77
Section 12.6: Using Media Queries to Target Dierent Screen Sizes ..................................................................... 78
Section 12.7: Use on link tag ....................................................................................................................................... 79
, Section 12.8: Media queries and IE8 .......................................................................................................................... 79
Chapter 13: Floats ....................................................................................................................................................... 80
Section 13.1: Float an Image Within Text ................................................................................................................... 80
Section 13.2: clear property ........................................................................................................................................ 81
Section 13.3: Clearfix .................................................................................................................................................... 82
Section 13.4: In-line DIV using float ............................................................................................................................ 83
Section 13.5: Use of overflow property to clear floats ............................................................................................. 85
Section 13.6: Simple Two Fixed-Width Column Layout ............................................................................................ 85
Section 13.7: Simple Three Fixed-Width Column Layout ......................................................................................... 86
Section 13.8: Two-Column Lazy/Greedy Layout ...................................................................................................... 87
Chapter 14: Typography ......................................................................................................................................... 88
Section 14.1: The Font Shorthand ............................................................................................................................... 88
Section 14.2: Quotes .................................................................................................................................................... 89
Section 14.3: Font Size ................................................................................................................................................. 89
Section 14.4: Text Direction ......................................................................................................................................... 89
Section 14.5: Font Stacks ............................................................................................................................................ 90
Section 14.6: Text Overflow ......................................................................................................................................... 90
Section 14.7: Text Shadow .......................................................................................................................................... 90
Section 14.8: Text Transform ...................................................................................................................................... 91
Section 14.9: Letter Spacing ........................................................................................................................................ 91
Section 14.10: Text Indent ............................................................................................................................................ 92
Section 14.11: Text Decoration ..................................................................................................................................... 92
Section 14.12: Word Spacing ....................................................................................................................................... 93
Section 14.13: Font Variant .......................................................................................................................................... 93
Chapter 15: Flexible Box Layout (Flexbox) ..................................................................................................... 95
Section 15.1: Dynamic Vertical and Horizontal Centering (align-items, justify-content) ...................................... 95
Section 15.2: Sticky Variable-Height Footer ........................................................................................................... 101
Section 15.3: Optimally fit elements to their container .......................................................................................... 102
Section 15.4: Holy Grail Layout using Flexbox ........................................................................................................ 103
Section 15.5: Perfectly aligned buttons inside cards with flexbox ........................................................................ 104
Section 15.6: Same height on nested containers .................................................................................................... 106
Chapter 16: Cascading and Specificity ........................................................................................................... 108
Section 16.1: Calculating Selector Specificity .......................................................................................................... 108
Section 16.2: The !important declaration ................................................................................................................ 110
Section 16.3: Cascading ............................................................................................................................................ 111
Section 16.4: More complex specificity example .................................................................................................... 112
Chapter 17: Colors .................................................................................................................................................... 114
Section 17.1: currentColor .......................................................................................................................................... 114
Section 17.2: Color Keywords ................................................................................................................................... 115
Section 17.3: Hexadecimal Value ............................................................................................................................. 120
Section 17.4: rgb() Notation ...................................................................................................................................... 121
Section 17.5: rgba() Notation .................................................................................................................................... 121
Section 17.6: hsl() Notation ....................................................................................................................................... 122
Section 17.7: hsla() Notation ..................................................................................................................................... 123
Chapter 18: Opacity ................................................................................................................................................. 124
Section 18.1: Opacity Property .................................................................................................................................. 124
Section 18.2: IE Compatibility for `opacity` .............................................................................................................. 124
Chapter 19: Length Units ....................................................................................................................................... 125
Section 19.1: Creating scalable elements using rems and ems ............................................................................ 125
, Section 19.2: Font size with rem ............................................................................................................................... 126
Section 19.3: vmin and vmax .................................................................................................................................... 127
Section 19.4: vh and vw ............................................................................................................................................. 127
Section 19.5: using percent % ................................................................................................................................... 127
Chapter 20: Pseudo-Elements ............................................................................................................................ 129
Section 20.1: Pseudo-Elements ................................................................................................................................ 129
Section 20.2: Pseudo-Elements in Lists ................................................................................................................... 129
Chapter 21: Positioning .......................................................................................................................................... 131
Section 21.1: Overlapping Elements with z-index .................................................................................................... 131
Section 21.2: Absolute Position ................................................................................................................................. 132
Section 21.3: Fixed position ....................................................................................................................................... 133
Section 21.4: Relative Position .................................................................................................................................. 133
Section 21.5: Static positioning ................................................................................................................................. 133
Chapter 22: Layout Control ................................................................................................................................. 134
Section 22.1: The display property .......................................................................................................................... 134
Section 22.2: To get old table structure using div ................................................................................................. 136
Chapter 23: Grid ........................................................................................................................................................ 138
Section 23.1: Basic Example ..................................................................................................................................... 138
Chapter 24: Tables .................................................................................................................................................. 140
Section 24.1: table-layout ......................................................................................................................................... 140
Section 24.2: empty-cells ......................................................................................................................................... 140
Section 24.3: border-collapse .................................................................................................................................. 140
Section 24.4: border-spacing ................................................................................................................................... 141
Section 24.5: caption-side ........................................................................................................................................ 141
Chapter 25: Transitions ......................................................................................................................................... 142
Section 25.1: Transition shorthand ........................................................................................................................... 142
Section 25.2: cubic-bezier ......................................................................................................................................... 142
Section 25.3: Transition (longhand) ........................................................................................................................ 144
Chapter 26: Animations ......................................................................................................................................... 145
Section 26.1: Animations with keyframes ................................................................................................................ 145
Section 26.2: Animations with the transition property .......................................................................................... 146
Section 26.3: Syntax Examples ................................................................................................................................ 147
Section 26.4: Increasing Animation Performance Using the `will-change` Attribute .......................................... 148
Chapter 27: 2D Transforms ................................................................................................................................. 149
Section 27.1: Rotate ................................................................................................................................................... 149
Section 27.2: Scale .................................................................................................................................................... 149
Section 27.3: Skew ..................................................................................................................................................... 150
Section 27.4: Multiple transforms ............................................................................................................................ 150
Section 27.5: Translate ............................................................................................................................................. 151
Section 27.6: Transform Origin ................................................................................................................................ 152
Chapter 28: 3D Transforms ................................................................................................................................. 153
Section 28.1: Compass pointer or needle shape using 3D transforms ................................................................ 153
Section 28.2: 3D text eect with shadow ................................................................................................................ 154
Section 28.3: backface-visibility ............................................................................................................................... 155
Section 28.4: 3D cube ............................................................................................................................................... 156
Chapter 29: Browser Support & Prefixes ...................................................................................................... 158
Section 29.1: Transitions ........................................................................................................................................... 158
Section 29.2: Transform ........................................................................................................................................... 158
Chapter 30: Normalizing Browser Styles ..................................................................................................... 159
About ................................................................................................................................................................................... 1
Chapter 1: Getting started with CSS .................................................................................................................... 2
Section 1.1: External Stylesheet ..................................................................................................................................... 2
Section 1.2: Internal Styles ............................................................................................................................................ 3
Section 1.3: CSS @import rule (one of CSS at-rule) ................................................................................................... 3
Section 1.4: Inline Styles ................................................................................................................................................. 4
Section 1.5: Changing CSS with JavaScript ................................................................................................................. 4
Section 1.6: Styling Lists with CSS ................................................................................................................................. 5
Chapter 2: Structure and Formatting of a CSS Rule .................................................................................. 7
Section 2.1: Property Lists ............................................................................................................................................. 7
Section 2.2: Multiple Selectors ...................................................................................................................................... 7
Section 2.3: Rules, Selectors, and Declaration Blocks ............................................................................................... 7
Chapter 3: Selectors .................................................................................................................................................... 8
Section 3.1: Basic selectors ........................................................................................................................................... 8
Section 3.2: Attribute Selectors .................................................................................................................................... 8
Section 3.3: Combinators ............................................................................................................................................ 11
Section 3.4: Pseudo-classes ....................................................................................................................................... 12
Section 3.5: Child Pseudo Class .................................................................................................................................. 14
Section 3.6: Class Name Selectors ............................................................................................................................. 14
Section 3.7: Select element using its ID without the high specificity of the ID selector ........................................ 15
Section 3.8: The :last-of-type selector ....................................................................................................................... 16
Section 3.9: CSS3 :in-range selector example .......................................................................................................... 16
Section 3.10: A. The :not pseudo-class example & B. :focus-within CSS pseudo-class ......................................... 16
Section 3.11: Global boolean with checkbox:checked and ~ (general sibling combinator) .................................. 18
Section 3.12: ID selectors ............................................................................................................................................. 19
Section 3.13: How to style a Range input .................................................................................................................. 19
Section 3.14: The :only-child pseudo-class selector example ................................................................................. 20
Chapter 4: Backgrounds ......................................................................................................................................... 21
Section 4.1: Background Color ................................................................................................................................... 21
Section 4.2: Background Gradients ........................................................................................................................... 23
Section 4.3: Background Image ................................................................................................................................. 24
Section 4.4: Background Shorthand .......................................................................................................................... 25
Section 4.5: Background Size ..................................................................................................................................... 26
Section 4.6: Background Position .............................................................................................................................. 30
Section 4.7: The background-origin property .......................................................................................................... 31
Section 4.8: Multiple Background Image .................................................................................................................. 33
Section 4.9: Background Attachment ....................................................................................................................... 33
Section 4.10: Background Clip .................................................................................................................................... 34
Section 4.11: Background Repeat ............................................................................................................................... 35
Section 4.12: background-blend-mode Property ..................................................................................................... 36
Section 4.13: Background Color with Opacity ........................................................................................................... 36
Chapter 5: Centering ................................................................................................................................................. 38
Section 5.1: Using Flexbox ........................................................................................................................................... 38
Section 5.2: Using CSS transform .............................................................................................................................. 39
Section 5.3: Using margin: 0 auto; ............................................................................................................................. 40
Section 5.4: Using text-align ....................................................................................................................................... 41
Section 5.5: Using position: absolute ......................................................................................................................... 41
, Section 5.6: Using calc() ............................................................................................................................................. 42
Section 5.7: Using line-height ..................................................................................................................................... 42
Section 5.8: Vertical align anything with 3 lines of code ......................................................................................... 43
Section 5.9: Centering in relation to another item ................................................................................................... 43
Section 5.10: Ghost element technique (Michał Czernow's hack) ........................................................................... 44
Section 5.11: Centering vertically and horizontally without worrying about height or width ............................... 45
Section 5.12: Vertically align an image inside div ..................................................................................................... 46
Section 5.13: Centering with fixed size ....................................................................................................................... 46
Section 5.14: Vertically align dynamic height elements .......................................................................................... 48
Section 5.15: Horizontal and Vertical centering using table layout ........................................................................ 48
Chapter 6: The Box Model ...................................................................................................................................... 50
Section 6.1: What is the Box Model? .......................................................................................................................... 50
Section 6.2: box-sizing ................................................................................................................................................ 51
Chapter 7: Margins ..................................................................................................................................................... 54
Section 7.1: Margin Collapsing .................................................................................................................................... 54
Section 7.2: Apply Margin on a Given Side ............................................................................................................... 56
Section 7.3: Margin property simplification .............................................................................................................. 57
Section 7.4: Horizontally center elements on a page using margin ...................................................................... 57
Section 7.5: Example 1: ................................................................................................................................................ 58
Section 7.6: Negative margins ................................................................................................................................... 58
Chapter 8: Padding .................................................................................................................................................... 60
Section 8.1: Padding Shorthand ................................................................................................................................. 60
Section 8.2: Padding on a given side ........................................................................................................................ 61
Chapter 9: Border ....................................................................................................................................................... 62
Section 9.1: border-radius ........................................................................................................................................... 62
Section 9.2: border-style ............................................................................................................................................. 63
Section 9.3: Multiple Borders ...................................................................................................................................... 64
Section 9.4: border (shorthands) ............................................................................................................................... 65
Section 9.5: border-collapse ...................................................................................................................................... 65
Section 9.6: border-image .......................................................................................................................................... 66
Section 9.7: Creating a multi-colored border using border-image ........................................................................ 66
Section 9.8: border-[left|right|top|bottom] ............................................................................................................... 67
Chapter 10: Outlines .................................................................................................................................................. 68
Section 10.1: Overview ................................................................................................................................................. 68
Section 10.2: outline-style ........................................................................................................................................... 68
Chapter 11: Overflow ................................................................................................................................................. 70
Section 11.1: overflow-wrap ......................................................................................................................................... 70
Section 11.2: overflow-x and overflow-y .................................................................................................................... 71
Section 11.3: overflow: scroll ........................................................................................................................................ 72
Section 11.4: overflow: visible ...................................................................................................................................... 72
Section 11.5: Block Formatting Context Created with Overflow .............................................................................. 73
Chapter 12: Media Queries ...................................................................................................................................... 75
Section 12.1: Terminology and Structure ................................................................................................................... 75
Section 12.2: Basic Example ....................................................................................................................................... 76
Section 12.3: mediatype .............................................................................................................................................. 76
Section 12.4: Media Queries for Retina and Non Retina Screens ........................................................................... 77
Section 12.5: Width vs Viewport ................................................................................................................................. 77
Section 12.6: Using Media Queries to Target Dierent Screen Sizes ..................................................................... 78
Section 12.7: Use on link tag ....................................................................................................................................... 79
, Section 12.8: Media queries and IE8 .......................................................................................................................... 79
Chapter 13: Floats ....................................................................................................................................................... 80
Section 13.1: Float an Image Within Text ................................................................................................................... 80
Section 13.2: clear property ........................................................................................................................................ 81
Section 13.3: Clearfix .................................................................................................................................................... 82
Section 13.4: In-line DIV using float ............................................................................................................................ 83
Section 13.5: Use of overflow property to clear floats ............................................................................................. 85
Section 13.6: Simple Two Fixed-Width Column Layout ............................................................................................ 85
Section 13.7: Simple Three Fixed-Width Column Layout ......................................................................................... 86
Section 13.8: Two-Column Lazy/Greedy Layout ...................................................................................................... 87
Chapter 14: Typography ......................................................................................................................................... 88
Section 14.1: The Font Shorthand ............................................................................................................................... 88
Section 14.2: Quotes .................................................................................................................................................... 89
Section 14.3: Font Size ................................................................................................................................................. 89
Section 14.4: Text Direction ......................................................................................................................................... 89
Section 14.5: Font Stacks ............................................................................................................................................ 90
Section 14.6: Text Overflow ......................................................................................................................................... 90
Section 14.7: Text Shadow .......................................................................................................................................... 90
Section 14.8: Text Transform ...................................................................................................................................... 91
Section 14.9: Letter Spacing ........................................................................................................................................ 91
Section 14.10: Text Indent ............................................................................................................................................ 92
Section 14.11: Text Decoration ..................................................................................................................................... 92
Section 14.12: Word Spacing ....................................................................................................................................... 93
Section 14.13: Font Variant .......................................................................................................................................... 93
Chapter 15: Flexible Box Layout (Flexbox) ..................................................................................................... 95
Section 15.1: Dynamic Vertical and Horizontal Centering (align-items, justify-content) ...................................... 95
Section 15.2: Sticky Variable-Height Footer ........................................................................................................... 101
Section 15.3: Optimally fit elements to their container .......................................................................................... 102
Section 15.4: Holy Grail Layout using Flexbox ........................................................................................................ 103
Section 15.5: Perfectly aligned buttons inside cards with flexbox ........................................................................ 104
Section 15.6: Same height on nested containers .................................................................................................... 106
Chapter 16: Cascading and Specificity ........................................................................................................... 108
Section 16.1: Calculating Selector Specificity .......................................................................................................... 108
Section 16.2: The !important declaration ................................................................................................................ 110
Section 16.3: Cascading ............................................................................................................................................ 111
Section 16.4: More complex specificity example .................................................................................................... 112
Chapter 17: Colors .................................................................................................................................................... 114
Section 17.1: currentColor .......................................................................................................................................... 114
Section 17.2: Color Keywords ................................................................................................................................... 115
Section 17.3: Hexadecimal Value ............................................................................................................................. 120
Section 17.4: rgb() Notation ...................................................................................................................................... 121
Section 17.5: rgba() Notation .................................................................................................................................... 121
Section 17.6: hsl() Notation ....................................................................................................................................... 122
Section 17.7: hsla() Notation ..................................................................................................................................... 123
Chapter 18: Opacity ................................................................................................................................................. 124
Section 18.1: Opacity Property .................................................................................................................................. 124
Section 18.2: IE Compatibility for `opacity` .............................................................................................................. 124
Chapter 19: Length Units ....................................................................................................................................... 125
Section 19.1: Creating scalable elements using rems and ems ............................................................................ 125
, Section 19.2: Font size with rem ............................................................................................................................... 126
Section 19.3: vmin and vmax .................................................................................................................................... 127
Section 19.4: vh and vw ............................................................................................................................................. 127
Section 19.5: using percent % ................................................................................................................................... 127
Chapter 20: Pseudo-Elements ............................................................................................................................ 129
Section 20.1: Pseudo-Elements ................................................................................................................................ 129
Section 20.2: Pseudo-Elements in Lists ................................................................................................................... 129
Chapter 21: Positioning .......................................................................................................................................... 131
Section 21.1: Overlapping Elements with z-index .................................................................................................... 131
Section 21.2: Absolute Position ................................................................................................................................. 132
Section 21.3: Fixed position ....................................................................................................................................... 133
Section 21.4: Relative Position .................................................................................................................................. 133
Section 21.5: Static positioning ................................................................................................................................. 133
Chapter 22: Layout Control ................................................................................................................................. 134
Section 22.1: The display property .......................................................................................................................... 134
Section 22.2: To get old table structure using div ................................................................................................. 136
Chapter 23: Grid ........................................................................................................................................................ 138
Section 23.1: Basic Example ..................................................................................................................................... 138
Chapter 24: Tables .................................................................................................................................................. 140
Section 24.1: table-layout ......................................................................................................................................... 140
Section 24.2: empty-cells ......................................................................................................................................... 140
Section 24.3: border-collapse .................................................................................................................................. 140
Section 24.4: border-spacing ................................................................................................................................... 141
Section 24.5: caption-side ........................................................................................................................................ 141
Chapter 25: Transitions ......................................................................................................................................... 142
Section 25.1: Transition shorthand ........................................................................................................................... 142
Section 25.2: cubic-bezier ......................................................................................................................................... 142
Section 25.3: Transition (longhand) ........................................................................................................................ 144
Chapter 26: Animations ......................................................................................................................................... 145
Section 26.1: Animations with keyframes ................................................................................................................ 145
Section 26.2: Animations with the transition property .......................................................................................... 146
Section 26.3: Syntax Examples ................................................................................................................................ 147
Section 26.4: Increasing Animation Performance Using the `will-change` Attribute .......................................... 148
Chapter 27: 2D Transforms ................................................................................................................................. 149
Section 27.1: Rotate ................................................................................................................................................... 149
Section 27.2: Scale .................................................................................................................................................... 149
Section 27.3: Skew ..................................................................................................................................................... 150
Section 27.4: Multiple transforms ............................................................................................................................ 150
Section 27.5: Translate ............................................................................................................................................. 151
Section 27.6: Transform Origin ................................................................................................................................ 152
Chapter 28: 3D Transforms ................................................................................................................................. 153
Section 28.1: Compass pointer or needle shape using 3D transforms ................................................................ 153
Section 28.2: 3D text eect with shadow ................................................................................................................ 154
Section 28.3: backface-visibility ............................................................................................................................... 155
Section 28.4: 3D cube ............................................................................................................................................... 156
Chapter 29: Browser Support & Prefixes ...................................................................................................... 158
Section 29.1: Transitions ........................................................................................................................................... 158
Section 29.2: Transform ........................................................................................................................................... 158
Chapter 30: Normalizing Browser Styles ..................................................................................................... 159
