fixing storybook with the recent changes

Author: wuweiweiwu

examples/storybooks/side-stack.js

@@ -12,6 +12,10 @@ import img7 from '../shared/img/7.jpg';
 
 class App extends Component {
   render() {
+    const layerStyle = {
+      transformOrigin: '50% 100%',
+    };
+
     return (
       <IsometricGrid
         transform="scale3d(0.8,0.8,1) rotateY(45deg) rotateZ(-10deg)"
@@ -33,15 +37,42 @@ class App extends Component {
           width: '800px',
         }}
       >
-        <Cell layers={[img1, '#9972fc', '#c322a3', '#9eb5c2']} />
-        <Cell layers={[img2, '#9972fc', '#c322a3', '#9eb5c2']} />
-        <Cell layers={[img3, '#9972fc', '#c322a3', '#9eb5c2']} />
-        <Cell layers={[img4, '#9972fc', '#c322a3', '#9eb5c2']} />
-        <Cell layers={[img5, '#9972fc', '#c322a3', '#9eb5c2']} />
-        <Cell layers={[img6, '#9972fc', '#c322a3', '#9eb5c2']} />
-        <Cell layers={[img7, '#9972fc', '#c322a3', '#9eb5c2']} />
-        <Cell layers={[img1, '#9972fc', '#c322a3', '#9eb5c2']} />
-        <Cell layers={[img2, '#9972fc', '#c322a3', '#9eb5c2']} />
+        <Cell
+          layerStyle={layerStyle}
+          layers={[img1, '#9972fc', '#c322a3', '#9eb5c2']}
+        />
+        <Cell
+          layerStyle={layerStyle}
+          layers={[img2, '#9972fc', '#c322a3', '#9eb5c2']}
+        />
+        <Cell
+          layerStyle={layerStyle}
+          layers={[img3, '#9972fc', '#c322a3', '#9eb5c2']}
+        />
+        <Cell
+          layerStyle={layerStyle}
+          layers={[img4, '#9972fc', '#c322a3', '#9eb5c2']}
+        />
+        <Cell
+          layerStyle={layerStyle}
+          layers={[img5, '#9972fc', '#c322a3', '#9eb5c2']}
+        />
+        <Cell
+          layerStyle={layerStyle}
+          layers={[img6, '#9972fc', '#c322a3', '#9eb5c2']}
+        />
+        <Cell
+          layerStyle={layerStyle}
+          layers={[img7, '#9972fc', '#c322a3', '#9eb5c2']}
+        />
+        <Cell
+          layerStyle={layerStyle}
+          layers={[img1, '#9972fc', '#c322a3', '#9eb5c2']}
+        />
+        <Cell
+          layerStyle={layerStyle}
+          layers={[img2, '#9972fc', '#c322a3', '#9eb5c2']}
+        />
       </IsometricGrid>
     );
   }

examples/storybooks/spread.js

@@ -19,7 +19,12 @@ class App extends Component {
     const cellStyle = {
       border: '20px solid #fff',
       borderWidth: '40px 20px',
-      boxShadow: '-1px 1px 5px rgba(0, 0, 0, 0.08)',
+      boxShadow: '-1px 1px 5px rgba(0, 0, 0, 0.1)',
+    };
+
+    const style = {
+      transformStyle: 'flat',
+      padding: '20px',
     };
 
     return (
@@ -28,8 +33,8 @@ class App extends Component {
         stackItemsAnimation={{
           properties() {
             return {
-              translateX: getRandomInt(-20, 20),
-              translateY: getRandomInt(-20, 20),
+              translateX: getRandomInt(-60, 60),
+              translateY: getRandomInt(-60, 60),
               rotateZ: getRandomInt(-10, 10),
             };
           },
@@ -50,14 +55,46 @@ class App extends Component {
           width: '800px',
         }}
       >
-        <Cell layerStyle={cellStyle} layers={[img7, img1, img6, img1]} />
-        <Cell layerStyle={cellStyle} layers={[img2, img1, img4, img5]} />
-        <Cell layerStyle={cellStyle} layers={[img7, img5, img1, img1]} />
-        <Cell layerStyle={cellStyle} layers={[img3, img3, img3, img3]} />
-        <Cell layerStyle={cellStyle} layers={[img5, img7, img5, img4]} />
-        <Cell layerStyle={cellStyle} layers={[img3, img6, img5, img5]} />
-        <Cell layerStyle={cellStyle} layers={[img6, img1, img3, img4]} />
-        <Cell layerStyle={cellStyle} layers={[img1, img5, img2, img7]} />
+        <Cell
+          style={style}
+          layerStyle={cellStyle}
+          layers={[img7, img1, img6, img1]}
+        />
+        <Cell
+          style={style}
+          layerStyle={cellStyle}
+          layers={[img2, img1, img4, img5]}
+        />
+        <Cell
+          style={style}
+          layerStyle={cellStyle}
+          layers={[img7, img5, img1, img1]}
+        />
+        <Cell
+          style={style}
+          layerStyle={cellStyle}
+          layers={[img3, img3, img3, img3]}
+        />
+        <Cell
+          style={style}
+          layerStyle={cellStyle}
+          layers={[img5, img7, img5, img4]}
+        />
+        <Cell
+          style={style}
+          layerStyle={cellStyle}
+          layers={[img3, img6, img5, img5]}
+        />
+        <Cell
+          style={style}
+          layerStyle={cellStyle}
+          layers={[img6, img1, img3, img4]}
+        />
+        <Cell
+          style={style}
+          layerStyle={cellStyle}
+          layers={[img1, img5, img2, img7]}
+        />
       </IsometricGrid>
     );
   }