css-study/cssData.json at master · zsimo/css-study · 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
var cssData = {

    "properties" : [
        "background-color",
        "background-image",
        "background-position", // percentage, length
        "border",
        "border-radius",
        "bottom",
        "box-shadow",
        "crop", // rectangle
        "cursor",
        "display",
        "font",
        "height",
        "left",
        "letter-spacing", // length
        "line-height", // number, length, percentage
        "margin",
        "opacity",
        "outline",
        "padding",
        "pointer-events",
        "position",
        "right",
        "text-align",
        "text-indent", // length, percentage
        "text-shadow",
        "top",
        "vertical-align", // keywords, length, percentage
        "visibility",
        "transform",
        "width",
        "word-spacing",
	    "z-index",
        "zoom" // number
    ],

    "propertiesThatNeedPrefix" : [
        "transform",
        "transform-origin",
        "transition",
        "perspective",
        "perspective-origin",
        "transform-style"
    ],

    "tranformFunctions" : [ // default value: none
        "matrix()", // (1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
        "translate(,)", // (12px, 50%)
        "translateX()", // (2em)
        "translateY()", // (3in)
        "scale(,)", // (2, 0.5)
        "scaleX()", // (2)
        "scaleX()", // (0.5)
        "rotate()", // (0.5turn)
        "skewX()", // (30deg)
        "skewY()", // (1.07rad)
        "matrix3d()", // (1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
        "translate3d(,,)", // (12px, 50%, 3em) px, %, em
        "translateZ()", // (2px)
        "scale3d(,,)", // (2.5, 1.2, 0.3)
        "scaleZ()", // (0.3)
        "rotate3d(,,,)", // (1, 2.0, 3.0, 10deg)
        "rotateX()", // (10deg)
        "rotateY()", // (10deg)
        "rotateZ()", // (10deg)
        "perspective()" // (17px)

    ],

    "defaultSettingIndex2" : [
        ["base", ".default { -webkit-transform: translate(100px, 100px); height: 100px; width: 100px; border-radius: 2px; background-color: black; z-index: 1; -webkit-transition: -webkit-transform 500ms ease, width 2000ms ease; }&/*base*/ .newState { -webkit-transform: translate(200px, 200px); width: 200px; }"],
        ["base-flip-card", ".default { position: absolute; top: 100px; left: 100px; height: 100px; width: 100px; background-color: black; z-index: 1; transition: all 500ms ease-in; color: white;font-size: 46px; }&/*base flip card*/ .newState { transform: rotateY(180deg); }"],
        ["nuovo01", ".default { position: absolute;top: 100px;left: 100px; height: 100px; width: 100px; background-color: rgba(0, 0, 0, .8); color: white; font-size: 46px; -webkit-transition: all 500ms ease-in; }&/*nuovo01*/ .newState { background-color: rgba(100, 200, 100, 1); /* transform: translate(50%, 50%) rotate(0.5turn); */ /* transform: translate3d(100%, 100%, 3em); */ /* transform: rotate3d(0, 0, 0, 90deg) */ /* transform: rotateZ(90deg); */ /* transform: perspective(17px); */ transform: translateX(-100px) rotate(90deg) translateY(-100px); }"],
        ["nuovo02", ".default { position: absolute;top: 100px;left: 100px; height: 100px; width: 100px; background-color: rgba(0, 0, 0, .8); color: white; font-size: 46px; -webkit-transition: all 500ms ease-in; }&/*nuovo02*/ .newState { background-color: rgba(100, 200, 100, 1); transform: rotate(90deg); -webkit-transform-origin: bottom; }"],
        ["nuovo03", ".default { position: absolute; top: 100px; left: 100px; height: 100px; width: 100px; background-color: black; z-index: 1; transition: all 500ms ease-in; }&/*nuovo03*/ .newState { transform: translate(100px, 100px); }"],
        ["nuovo04", ".default { position: absolute; top: 100px; left: 100px; height: 100px; width: 100px; background-color: black; z-index: 1; transition: all 500ms ease-in; }&/*nuovo04*/ .newState { -webkit-transform-origin: 100px 100px; -webkit-transform: rotate(45deg); }"],
        ["nuovo05", ".default { position: absolute; top: 100px; left: 100px; height: 100px; width: 100px; background-color: black; z-index: 1; transition: all 500ms ease-in; color: white;font-size: 46px; }&/*nuovo05*/ .newState { transform: rotateY(50deg); }"],
        ["rotate-as-decrease-width", ".default { position: absolute; top: 100px; left: 100px; height: 100px; width: 100px; background-color: black; z-index: 1; transition: all 500ms ease-in; color: white;font-size: 46px; }&/*rotate-as-decrease-width */ .newState { transform: rotateY(50deg); }"]

    ]


};