This is bdthemes shortcodes ultimate (joomla) Flip Box example. you can get facility in this shortcode item> Flip Box Animation Style, Background Color, Color, Border, Shadow, Border Radius, Alignment, Extra Class, Content.just simply use this shortcode and get more Flip Box style.
Note: you can use this shortcode article and custom module. for your help we give a example bellow >

Horizontal Flip Left Example

[flip_box animation_style="horizontal_flip_left" text_align="left"]
	[flip_front background="#2c3e50"  color="#fff" border="3px solid #10171E"]
		front end content here...
	[/flip_front]
  
	[flip_back background="#3E5670"  color="#fff" border="3px solid #4D7CA7"]
		back end content here...
	[/flip_back]
[/flip_box]

Horizantal Flip Right Example

[flip_box animation_style="horizontal_flip_right" text_align="right"]
  [flip_front background="#2980b9" color="#e5e5e5" border="3px solid #1B5479"]
    your front end content here...
  [/flip_front]
  [flip_back background="#49A3DF" color="#fff" border="3px solid #217EBB"]
    your back end content here...
  [/flip_back]
[/flip_box]

Vertical Flip Bottom Example

[flip_box animation_style="vertical_flip_bottom" text_align="center"]
  [flip_front background="#2980b9" color="#e5e5e5" border="2px dotted #1B5479"]
    your front end content here...
  [/flip_front]
  [flip_back background="#49A3DF" color="#fff" border="2px dotted #217EBB"]
    your back end content here...
  [/flip_back]
[/flip_box]

Vertical Flip Top Example

[flip_box animation_style="vertical_flip_top" text_align="left"]
  [flip_front background="#2980b9" color="#e5e5e5" shadow="0 0 5px #444"]
    your front end content here...
  [/flip_front]
  [flip_back background="#49A3DF" color="#fff" shadow="0 0 5px #444"]
    your back end content here...
  [/flip_back]
[/flip_box]

Flip Left Example

[flip_box animation_style="flip_left" text_align="center"]
  [flip_front background="#2980b9" color="#e5e5e5" border="3px solid #1B5479"]
    your front end content here...
  [/flip_front]
  [flip_back background="#49A3DF" color="#fff" border="3px solid #217EBB"]
    your back end content here...
  [/flip_back]
[/flip_box]

Flip Right Example

[flip_box animation_style="flip_right" text_align="right"]
  [flip_front background="#2980b9" color="#e5e5e5" border="3px solid #1B5479"]
    your front end content here...
  [/flip_front]
  [flip_back background="#49A3DF" color="#fff" border="3px solid #217EBB"]
    your back end content here...
  [/flip_back]
[/flip_box]

Flip Top Example

[flip_box animation_style="flip_top" text_align="center"]
  [flip_front background="#2980b9" color="#e5e5e5" border="3px solid #1B5479"]
    your front end content here...
  [/flip_front]
  [flip_back background="#49A3DF" color="#fff" border="3px solid #217EBB"]
    your back end content here...
  [/flip_back]
[/flip_box]

Flip Bottom Example

[flip_box animation_style="flip_bottom" text_align="center"]
  [flip_front background="#2980b9" color="#e5e5e5" border="5px solid #1B5479"]
    your front end content here...
  [/flip_front]
  [flip_back background="#49A3DF" color="#fff" border="5px solid #217EBB"]
    your back end content here...
  [/flip_back]
[/flip_box]