QuickFlip 3 Settings


  • Two Sided?: (checkbox) Have two different sides to the animation
    • Default: true
  • Animate on Click?: (checkbox) Animate QuickFlip on clikc instead of Hover
    • Default: false
  • Animation: (select) The animation used to flip through thte content
    • Default: Flip Right
    • Possible Values:
      • Flip Right: rotateX(180deg)
      • Flip Left: rotateX(-180deg)
      • Flip Up: rotateY(180deg)
      • Flip Down: rotateY(-180deg)
      • Twist Up: rotateX(180deg) rotateY(180deg)
      • Twist Down: rotateX(-180deg) rotateY(-180deg)
      • Vortex: rotateZ(360deg) rotateX(180deg)
      • —- One Sided Only —-:
      • Shift Up/Down: translateY()
      • Shift Left/Right: translateX()
  • Speed: (number) The animation speed
    • Default: 600ms
    • Min Value: 0ms
    • Max Value: 10000ms
  • Shift Distance: (number) The distance metric used for the shift animations. This value can be positive or negative
    • Default: -15px
    • Min Value: -1000px
    • Max Value: 1000px

  • Round Corners: (slider) Select the px value for border radius
    • Default: 0px
    • Min Value: 0px
    • Max Value: 40px
  • Drop Shadow?: (checkbox) Select to enable a drop shadow on the stack
    • Default: false
  • X-Offset: (number) Select the x-offset for the box shadow on the card
    • Enable: When Drop Shadow? is set to true
    • Default: 0px
    • Min Value: -50px
    • Max Value: 50px
  • Y-Offset: (number) Select the y-offset for the box shadow on the card
    • Enable: When Drop Shadow? is set to true
    • Default: 8px
    • Min Value: -50px
    • Max Value: 50px
  • Shade: (slider) Select the RGBa value for the color of the shadow
    • Enable: When Drop Shadow? is set to true
    • Default: 0
    • Min Value: 0
    • Max Value: 225
  • Blur: (slider) Select the blur radius for the shadow
    • Enable: When Drop Shadow? is set to true
    • Default: 6px
    • Min Value: 0px
    • Max Value: 15px
  • Spread: (slider) Select the shadow spread for the box shadow of the card
    • Enable: When Drop Shadow? is set to true
    • Default: -6px
    • Min Value: -10px
    • Max Value: 15px
  • Info: If the shadow is getting cut off, you may need to add padding to the stack