Add scroll snap demo directory and files.

* demos/scroll-snap/images/1.png: Added.
* demos/scroll-snap/images/10.png: Added.
* demos/scroll-snap/images/11.png: Added.
* demos/scroll-snap/images/12.png: Added.
* demos/scroll-snap/images/13.png: Added.
* demos/scroll-snap/images/14.png: Added.
* demos/scroll-snap/images/15.png: Added.
* demos/scroll-snap/images/16.png: Added.
* demos/scroll-snap/images/2.png: Added.
* demos/scroll-snap/images/3.png: Added.
* demos/scroll-snap/images/4.png: Added.
* demos/scroll-snap/images/5.png: Added.
* demos/scroll-snap/images/6.png: Added.
* demos/scroll-snap/images/7.png: Added.
* demos/scroll-snap/images/8.png: Added.
* demos/scroll-snap/images/9.png: Added.
* demos/scroll-snap/images/bluecross.svg: Added.
* demos/scroll-snap/images/corner.svg: Added.
* demos/scroll-snap/index.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@189755 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/webkit.org/ChangeLog b/Websites/webkit.org/ChangeLog
index a05743e..214f714 100644 (file)
--- a/Websites/webkit.org/ChangeLog
+++ b/Websites/webkit.org/ChangeLog
@@ -1,3 +1,27 @@
+2015-09-14  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        Add scroll snap demo directory and files.
+
+        * demos/scroll-snap/images/1.png: Added.
+        * demos/scroll-snap/images/10.png: Added.
+        * demos/scroll-snap/images/11.png: Added.
+        * demos/scroll-snap/images/12.png: Added.
+        * demos/scroll-snap/images/13.png: Added.
+        * demos/scroll-snap/images/14.png: Added.
+        * demos/scroll-snap/images/15.png: Added.
+        * demos/scroll-snap/images/16.png: Added.
+        * demos/scroll-snap/images/2.png: Added.
+        * demos/scroll-snap/images/3.png: Added.
+        * demos/scroll-snap/images/4.png: Added.
+        * demos/scroll-snap/images/5.png: Added.
+        * demos/scroll-snap/images/6.png: Added.
+        * demos/scroll-snap/images/7.png: Added.
+        * demos/scroll-snap/images/8.png: Added.
+        * demos/scroll-snap/images/9.png: Added.
+        * demos/scroll-snap/images/bluecross.svg: Added.
+        * demos/scroll-snap/images/corner.svg: Added.
+        * demos/scroll-snap/index.html: Added.
+
 2015-09-03  Matt Baker  <mattbaker@apple.com>
 
         Added and updated assets for Introducing the Rendering Frames Timeline blog post.

diff --git a/Websites/webkit.org/demos/scroll-snap/images/1.png b/Websites/webkit.org/demos/scroll-snap/images/1.png
new file mode 100644 (file)
index 0000000..f5c421e
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/1.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/10.png b/Websites/webkit.org/demos/scroll-snap/images/10.png
new file mode 100644 (file)
index 0000000..31763fd
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/10.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/11.png b/Websites/webkit.org/demos/scroll-snap/images/11.png
new file mode 100644 (file)
index 0000000..0692d4b
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/11.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/12.png b/Websites/webkit.org/demos/scroll-snap/images/12.png
new file mode 100644 (file)
index 0000000..82d0f49
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/12.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/13.png b/Websites/webkit.org/demos/scroll-snap/images/13.png
new file mode 100644 (file)
index 0000000..3b041e5
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/13.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/14.png b/Websites/webkit.org/demos/scroll-snap/images/14.png
new file mode 100644 (file)
index 0000000..f7dc585
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/14.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/15.png b/Websites/webkit.org/demos/scroll-snap/images/15.png
new file mode 100644 (file)
index 0000000..40ed56c
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/15.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/16.png b/Websites/webkit.org/demos/scroll-snap/images/16.png
new file mode 100644 (file)
index 0000000..37c99e1
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/16.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/2.png b/Websites/webkit.org/demos/scroll-snap/images/2.png
new file mode 100644 (file)
index 0000000..a66ff6e
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/2.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/3.png b/Websites/webkit.org/demos/scroll-snap/images/3.png
new file mode 100644 (file)
index 0000000..b4f742c
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/3.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/4.png b/Websites/webkit.org/demos/scroll-snap/images/4.png
new file mode 100644 (file)
index 0000000..8563404
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/4.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/5.png b/Websites/webkit.org/demos/scroll-snap/images/5.png
new file mode 100644 (file)
index 0000000..353c465
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/5.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/6.png b/Websites/webkit.org/demos/scroll-snap/images/6.png
new file mode 100644 (file)
index 0000000..487bf4d
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/6.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/7.png b/Websites/webkit.org/demos/scroll-snap/images/7.png
new file mode 100644 (file)
index 0000000..310adc5
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/7.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/8.png b/Websites/webkit.org/demos/scroll-snap/images/8.png
new file mode 100644 (file)
index 0000000..0e032e7
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/8.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/9.png b/Websites/webkit.org/demos/scroll-snap/images/9.png
new file mode 100644 (file)
index 0000000..421e442
Binary files /dev/null and b/Websites/webkit.org/demos/scroll-snap/images/9.png differ

diff --git a/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg b/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg
new file mode 100644 (file)
index 0000000..ae04fc1
--- /dev/null
+++ b/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <polygon fill="#6666FF" points="10,0 15,0 15,10 26,10 26,15 15,15 15,26 10,26 10,15 0,15 0,10 10,10"></polygon>
+</svg>
\ No newline at end of file

diff --git a/Websites/webkit.org/demos/scroll-snap/images/corner.svg b/Websites/webkit.org/demos/scroll-snap/images/corner.svg
new file mode 100644 (file)
index 0000000..06c465b
--- /dev/null
+++ b/Websites/webkit.org/demos/scroll-snap/images/corner.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 50,0 50,5 5,5 5,50 0,50"></polygon>
+</svg>
\ No newline at end of file

diff --git a/Websites/webkit.org/demos/scroll-snap/index.html b/Websites/webkit.org/demos/scroll-snap/index.html
new file mode 100644 (file)
index 0000000..1ae10ee
--- /dev/null
+++ b/Websites/webkit.org/demos/scroll-snap/index.html
@@ -0,0 +1,433 @@
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>Scroll Snapping Examples</title>
+        <style>
+        body {
+            line-height: 1.5;
+            margin: 2em 2em;
+            padding: 0;
+            background-color: #E2E6F5;
+        }
+
+        pre {
+            padding: 1em 3em;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+            background-color: #ddd;
+        }
+
+        code {
+            font-size: 115%;
+            font-weight: bold;
+            color: #0F5426;
+        }
+
+        p > span {
+            color: #6666FF;
+        }
+
+        h1, h3, p {
+            font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+            font-size: 120%;
+        }
+
+        h1 {
+            font-size: 40px;
+        }
+
+        p {
+            font-size: 20px;
+        }
+
+        h3 {
+            font-size: 25px;
+            margin-top: 10vh;
+        }
+
+        .corner {
+            fill: black;
+            background: transparent;
+            position: absolute;
+            width: 50px;
+            height: 50px;
+        }
+
+        .child {
+            width: 400px;
+            height: 400px;
+            position: relative;
+            background-color: #F0F0F0;
+            display: inline-block;
+            margin-right: -4px;
+            border: 1px solid black;
+        }
+
+        .label {
+            width: 200px;
+            height: 200px;
+            border-radius: 25%;
+            background-color: white;
+            margin: 100px auto 0 auto;
+        }
+
+        .label > h1 {
+            font-size: 80px;
+            padding-left: calc(50% - 22px);
+            padding-top: calc(50% - 60px);
+        }
+
+        .top-right {
+            left: 350px;
+            -ms-transform: rotate(90deg);
+            -webkit-transform: rotate(90deg);
+            transform: rotate(90deg);
+        }
+
+        .bottom-left {
+            top: 350px;
+            -ms-transform: rotate(270deg);
+            -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+        }
+
+        .bottom-right {
+            top: 350px;
+            left: 350px;
+            -ms-transform: rotate(180deg);
+            -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+        }
+
+        .child-thin {
+            width: 300px;
+        }
+
+        .child-thin > .top-right {
+            left: 250px;
+        }
+        
+        .child-thin > .bottom-right {
+            left: 250px;
+        }
+
+        .container {
+            width: 402px;
+            height: 410px;
+            overflow-x: auto;
+            overflow-y: hidden;
+            white-space: nowrap;
+            -webkit-overflow-scrolling: touch;
+            margin: 10vh auto 0 auto;
+        }
+
+        #snap-scroll-container {
+            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: mandatory;
+            -webkit-scroll-snap-points-x: repeat(100%);
+            scroll-snap-points-x: repeat(100%);
+        }
+
+        #snap-scroll-container-coordinates {
+            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: mandatory;
+        }
+
+        #snap-scroll-container-coordinates > .child {
+            -webkit-scroll-snap-coordinate: 0% 0%;
+            scroll-snap-coordinate: 0% 0%;
+        }
+
+        #snap-scroll-container-coordinates-centered {
+            width: 402px;
+            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: mandatory;
+            -webkit-scroll-snap-destination: 50% 50%;
+            scroll-snap-destination: 50% 50%;
+        }
+
+        #snap-scroll-container-coordinates-centered > .child {
+            -webkit-scroll-snap-coordinate: 50% 50%;
+            scroll-snap-coordinate: 50% 50%;
+        }
+
+        .snap-destination,
+        .snap-destination-centered {
+            width: 25px;
+            height: 25px;
+            z-index: 1;
+            position: absolute;
+        }
+
+        .snap-destination {
+            margin: -10px 0 0 -10px;
+        }
+
+        .snap-destination-centered {
+            margin: 187px 0 0 187px;
+        }
+
+        .snap-point {
+            width: 25px;
+            height: 25px;
+            -ms-transform: rotate(45deg);
+            -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
+            z-index: 1;
+            position: absolute;
+            margin: -10px 0 0 -10px;
+        }
+
+        #snap-scroll-container-2D,
+        #snap-scroll-container-2D-rotated {
+            -webkit-scroll-snap-type: mandatory;
+            scroll-snap-type: mandatory;
+            -webkit-scroll-snap-destination: 50% 50%;
+            scroll-snap-destination: 50% 50%;
+            overflow: scroll;
+            width: 500px;
+            height: 500px;
+            border-radius: 50px;
+        }
+
+        #snap-scroll-container-2D > img,
+        #snap-scroll-container-2D-rotated > img {
+            -webkit-scroll-snap-coordinate: 50% 50%;
+            scroll-snap-coordinate: 50% 50%;
+            width: 400px;
+            height: 400px;
+        }
+
+        #snap-scroll-container-2D-rotated {
+            margin-top: 20vh;
+            margin-bottom: 20vh;
+            -ms-transform: rotate(30deg);
+            -webkit-transform: rotate(30deg);
+            transform: rotate(30deg);
+        }
+
+        #nasa {
+            font-size: 16px;
+        }
+        </style>
+    </head>
+
+    <body>
+        <h1>The <code>scroll-snap-*</code> Properties.</h1>
+        <p id="subtext">The following examples are overflow-scrolling <code>div</code>s. In the second, third and fourth examples, the <span>blue</span> cross represents the location of each container&rsquo;s scroll snap destination.</p>
+        <!-- Normal scrolling container (no snapping) -->
+        <h3 style="margin-top: 5vh;">This first container does not have any scroll snapping behavior.</h3>
+        <div class="container">
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>1</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>2</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>3</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>4</h1></div>
+            </div>
+        </div>
+
+        <!-- Simple scroll snapping container (using repeat) -->
+        <h3>This second container shows what basic scroll snapping can do for us.</h3>
+        <div class="container" id="snap-scroll-container">
+            <img src="images/bluecross.svg" class="snap-destination"></img>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>1</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>2</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>3</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>4</h1></div>
+            </div>
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-points-x: repeat(100%);</pre>
+
+        <!-- Scroll snapping container using coordinates -->
+        <h3>This next container snaps to elements of different sizes when scrolling.</h3>
+        <div class="container" id="snap-scroll-container-coordinates">
+            <img src="images/bluecross.svg" class="snap-destination"></img>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>1</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>2</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>3</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>4</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>5</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>6</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>7</h1></div>
+            </div>
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;</pre>
+        <p>The CSS for each of the container&rsquo;s children is:</p>
+        <pre>-webkit-scroll-snap-coordinate: 0% 0%;</pre>
+
+        <!-- Centered scroll snapping container using coordinates -->
+        <h3>Here, we snap elements of different sizes to the center of the container.</h3>
+        <div class="container" id="snap-scroll-container-coordinates-centered">
+            <img src="images/bluecross.svg" class="snap-destination-centered"></img>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>1</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>2</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>3</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>4</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>5</h1></div>
+            </div>
+            <div class="child child-thin">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>6</h1></div>
+            </div>
+            <div class="child">
+                <img class="corner top-left" src="images/corner.svg"></img>
+                <img class="corner top-right" src="images/corner.svg"></img>
+                <img class="corner bottom-left" src="images/corner.svg"></img>
+                <img class="corner bottom-right" src="images/corner.svg"></img>
+                <div class="label"><h1>7</h1></div>
+            </div>
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
+        <p>The CSS for each of the container&rsquo;s children is:</p>
+        <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+
+        <!-- Centered scroll snapping container in 2D -->
+        <h3>This container shows centered scroll snapping in a 2D grid.</h3>
+        <div class="container" id="snap-scroll-container-2D">
+            <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
+            <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
+            <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
+            <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
+        <p>The CSS for each of the container&rsquo;s children is:</p>
+        <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+
+        <!-- Centered scroll snapping container in 2D, rotated -->
+        <h3>This example takes the 2D scroll snapping grid above and rotates it by 30 degrees.</h3>
+        <div class="container" id="snap-scroll-container-2D-rotated">
+            <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
+            <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
+            <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
+            <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
+        </div>
+        <p>The CSS for the above container is:</p>
+        <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;<br>-webkit-transform: rotate(30deg);</pre>
+        <p>The CSS for each of the container&rsquo;s children is:</p>
+        <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+
+        <p id="nasa">Images from <a target="_blank" href="https://www.nasa.gov/multimedia/imagegallery/iotd.html">NASA&rsquo;s image of the day gallery</a>.</p>
+    </body>
+</html>