css-experiments/cube-3d/touch.html at 0cfbe320d214d3343aa3b2f851f1b46292f746ce · fofr/css-experiments · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
    <!-- Article: https://paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/ -->
    <!-- Demo: https://paulrhayes.com/experiments/cube-3d/touch.html -->
    <!-- Originally posted: 28th September 2010 -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>3D CSS cube, use arrow keys, touch gestures or click and drag to rotate &mdash; Paul Hayes</title>
    <meta name="author" content="Paul Hayes" />
    <link rel="canonical" href="https://paulrhayes.com/experiments/cube-3d/touch.html" />
    <link rel="stylesheet" href="../experiment-styles.css" />

    <link rel="stylesheet" href="css/touch.css" />
</head>
<body class="experiment">
    <div class="wrapper">
        <p class="learn">
            This is a demo, <a href="https://paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/">learn how it works</a>.
        </p>

<article class="viewport">
    <section class="cube">
        <div></div>
        <div>
            <h2>3D cube</h2>
            <time>28th September 2010</time>
            <p>By Paul Hayes</p>
            <p>3D cube built using css, webkit-perspective and webkit-transform. Rotation via webkit-transition.</p>
            <p>Use arrow keys to navigate, or click and hold mouse. On touch screens, use one finger to rotate. Press ESC to reset.</p>
            <p><a href="https://paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/" target="_top">Read more &raquo;</a></p>
        </div>
        <div>
            <!-- video -->
        </div>
        <div>
            <h2><a href="https://paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Learn how to make a cube</a></h2>
            <time>17th July 2009</time>
            <p>By Paul Hayes</p>
            <p>&#8220;A 3D cube can be created solely in CSS, with all six faces.&#8221;</p>
            <p>Article: <a href="https://paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top">Cube explanation</a></p>
        </div>
        <div>
            <p>I design and build websites in Brighton</p>
        </div>
        <div>
            <small>Nothing down here.</small>
        </div>
    </section>
</article>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/touch.js"></script>
</body>
</html>