railslider 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 89d4103ebf083ed4573d9a2e70b2aa2f705f18b6
-  data.tar.gz: 22fd59490b85e2a9c046260f23cca5b1872f8492
+  metadata.gz: b9d9b0f601f4e11b083a12a9775e0459286a7698
+  data.tar.gz: 11eb23f940128d4269b087515949304810cb7e7a
 SHA512:
-  metadata.gz: 3cc234c7964bef4f9f6f354896be2366d71c6cfdcb3dfcf266fa5dfd2377e53416aa402846c607921d84e3a6123037e03c4d9ce5027888035585ee7d19841cd5
-  data.tar.gz: 248f4d21abc2b795c24c934a4b66f4f8b936ea982a63007fc727fed92a973063afff63b26863507b1ba679d9aeed675832d5f676e8fea7db302598abce12dc85
+  metadata.gz: acc234e8848087de4ea6badae52c866df2cea7bc1500c21d2fa02303f234aadb75bfeed3ba14444ecb5ad03eff929aaeaf398c491853d5f74eed5df823439da7
+  data.tar.gz: 26b00b8a23e2b6f59b6c901064e255564a2c37c5659fc1fa45af21538418a1f5c1193d6af8cb85fc274f450bdd9cc0a82964de835427f78e78e0114aa664d6a2

data/.idea/encodings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" useUTFGuessing="true" native2AsciiForPropertiesFiles="false" />
+</project>
+

data/.idea/misc.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="RVM: ruby-2.0.0-p247" project-jdk-type="RUBY_SDK" />
+</project>
+

data/.idea/modules.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/railslider.iml" filepath="$PROJECT_DIR$/.idea/railslider.iml" />
+    </modules>
+  </component>
+</project>
+

data/.idea/railslider.iml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="RUBY_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="gem" name="Gem">
+      <configuration>
+        <option name="GEM_APP_ROOT_PATH" value="$MODULE_DIR$" />
+        <option name="GEM_APP_TEST_PATH" value="" />
+        <option name="GEM_APP_LIB_PATH" value="$MODULE_DIR$/lib" />
+      </configuration>
+    </facet>
+  </component>
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" scope="PROVIDED" name="bundler (v1.3.5, RVM: ruby-2.0.0-p247) [gem]" level="application" />
+    <orderEntry type="library" scope="PROVIDED" name="rake (v10.1.0, RVM: ruby-2.0.0-p247) [gem]" level="application" />
+  </component>
+</module>
+

data/.idea/scopes/scope_settings.xml

@@ -0,0 +1,5 @@
+<component name="DependencyValidationManager">
+  <state>
+    <option name="SKIP_IMPORT_STATEMENTS" value="false" />
+  </state>
+</component>

data/.idea/vcs.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
+

data/README.md

@@ -1,6 +1,21 @@
 # Railslider
 
-TODO: Write a gem description
+Introduces simple image slider for rails applications using CSS3 animations for image transitions.
+The idea is inspired by [this great codedrops article] (http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/).
+
+## Support
+
+Tested on:
+
+1. Google Chrome (Version 35.0.1916.153)
+2. Chromium (Version 34.0.1847.116)
+3. Safari (Version 5.1.7)
+4. Opera (22.0.1471.70)
+
+Coming soon:
+
+1. Internet Explorer 11 (only animations from "unfolds" and "other" groups work for now)
+2. Mozzila Firefox 30 (need to debug and remove some issues)
 
 ## Installation
 
@@ -15,15 +30,216 @@ And then execute:
 Or install it yourself as:
 
     $ gem install railslider
+    
+## Creating demonstration rails slider
+
+In order to get known with the *rails slider* options you can create a demo image slider following the steps below:
+
+__Creating demo slider files__ 
+
+Executing the following line in your rails application console:
+
+    rails generate railslider demo
+
+is generating the files below:
+    
+   * app/railslider/demo.rb
+   * vendor/assets/stylesheets/railslider/demo.rb/transitions.css.sass
+   
+__Loading demo slider css and javascript files__
+
+Add the following line in your *application.js* file:
+
+    //= require railslider.js
+
+Add the following lines in your *application.css* file:
+
+    *= require railslider.css.sass
+    *= require railslider/demo/transitions.css.sass
+ 
+__Rendering demo slider using default images__
+
+Add the following line in some *model/show.html.erb*:
+
+    Demo.new({id:demo}).render
+    
+Add the following lines in the corresponding *model.js*: 
+
+    //Checking if jQuery function is loaded
+    (function IsjQueryLoaded(){
+        if(window.jQuery){
+            //Waiting for all elements to be rendered
+            $(document).ready(function(){
+                //Creating new instance of "RailSlider"
+                demo = new RailSlider({'containerID':'demo'});
+                demo.init();
+            });
+        }else{
+            setTimeout(IsjQueryLoaded(),1000);
+        }
+    })();
+    
+Execute the following line In your browser console:
+
+    demo.controls.show()
+    
+__Result__
+
+You should end up with a demo rails slider image gallery rendered and controls for changing the animations visible.
 
 ## Usage
 
-TODO: Write usage instructions here
+### Basic Usage
+
+In order to implement the *rails slider* in your rails application follow the steps below:
+
+__Creating rails slider files__ 
+
+Executing the following line in your rails application console:
+
+    rails generate railslider class_name
+
+is generating the files below:
+    
+   * app/railslider/class_name.rb
+   * vendor/assets/stylesheets/railslider/class_name.rb/transitions.css.sass
+   
+__Loading *rails slider* and *class_name* css and javascript files__
+
+Add the following line in your *application.js* file:
+
+    //= require railslider.js
+
+Add the following lines in your *application.css* file:
+
+    *= require railslider.css.sass
+    *= require railslider/class_name/transitions.css.sass
+ 
+__Rendering *rails slider*__
+
+Add the following line in your *model/show.html.erb*:
+
+     ClassName.new({
+                      id: 'sliderID',
+                      images_urls: @images_url
+                   }).render
+                  
+where:
+
+   * __id__ - defines slider HTML container ID and is use for additional JavaScript manipulations after slider is rendered
+   * __images_urls__ - is array containing valid images urls
+    
+Add the following lines in the corresponding *model.js*: 
+
+    //Checking if jQuery function is loaded
+    (function IsjQueryLoaded(){
+        if(window.jQuery){
+            //Waiting for all elements to be rendered
+            $(document).ready(function(){
+                //Creating new instance of "RailSlider"
+                myFirstSlider = new RailSlider({'containerID':'sliderID'});
+                myFirstSlider.init();
+            });
+        }else{
+            setTimeout(IsjQueryLoaded(),1000);
+        }
+    })();
+    
+### CSS3 Animations Module Usage
+
+The CSS3 animations used for images transitions are defined in *railslider/class_name/transitions.css.sass* file. These animations depend on the following global variables defined in the given file:
+
+   * image width 
+   * image height 
+   * slices count
+
+1. Why should I changed the images *width* and *height*?
+
+  The CSS3 animations depends on image size. You need to use images with same width and height and set these values in the corresponding *railslider/class_name/transitions.css.sass* file.
+
+  If the images are uploaded by client users, you can check [this railscast] (http://railscasts.com/episodes/253-carrierwave-file-uploads) in order to learn how to upload and resize images.
+
+2. How to change images width and height default values?
+
+  Open the *railslider/class_name/transitions.css.sass* file and change the default values (declared on the top):
+
+       $image_width: 329
+       $image_height: 425
+
+3. How to use several *rails sliders* displaying images with different dimensions on the same web page?
+
+  Firstly, generate several *rails sliders* files using the gem generator. 
+  Then, change the dimensions of each images group in theirs *railslider/class_name/transitions.css.sass* files.
+  Finally, rendered the sliders as usual.
+
+4. How many transitions effects are implemented?
+
+  For now, there are 25 transitions effects. All effects from [this great codedrops article] (http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/) are available.
+
+5. How to set initial transition effect?
+
+  You can set initial effect using the *effect* property when slider is rendered like follows:
+
+        ClassName.new({
+              id: 'sliderID',
+              effect: 'flip04',
+              images_urls: @images_url
+        }).render
+
+  This is initial effect only and can be changed later using JavaScript or sliders controls.
+
+6. Which are the possible values for *initial effect* property?
+  
+  * flips: flip01, flip02, flip03, flip04
+  * rotations: rotation01, rotation02, rotation03, rotation04, rotation05
+  * multi-flips: multi-flip01, multi-flip02, multi-flip03
+  * cubes: cube01, cube02, cube03, cube04
+  * unfolds: unfold01, unfold02
+  * others: other01, other02, other03 ,other04 ,other05 ,other06 ,other07
+
+   Note: The default value of the *initial effect* is *flip01*.
+   
+7. How to change numbers of pieces used by *multi-flips* effects?
+
+  The *multi-flips* effects are special as the image is divided in N flipping parts. The default value is 7.
+  If you need to change it follow the steps below:
+
+  First, open the *railslider/class_name/transitions.css.sass* file and change the default value (declared on the top):
+
+    $slices_count: 7
+
+  Then, open the *app/railslider/class_name.rb* file and changed the *render_multi_flips* method definition:
+
+      def render_multi_flips
+        @result_html = ''
+        for index in 1 .. 7
+          @result_html +=
+              "
+            <div class=\"rs-multi-flip rs-card rs-flip#{index}\">
+              <div class=\"rs-front\"></div>
+              <div class=\"rs-back\"></div>
+            </div>
+            "
+        end
+        @result_html
+      end
+
+  For example if you need to have 12 flipping part, change the for loop from *1..7* to *1..12*.
+
+  Note: The *slices_count* value should be odd number.
+
+8. Should I edit the gem CSS files if I need?
+
+  Of course. These are ordinary CSS files and you are free to change them as you like in order to get better performance.
+
+### JavaScript Module Usage
+
+Some of the important *RailSlider* JavaScript object properties are:
 
-## Contributing
+  * type - holds current animation value
+  * isAutoSlidingEnabled - default is true
+  * direction - show "next" or "prev" image
+  * timeInterval - auto sliding time interval im milliseconds (default is 5000)
+  * controls - reference to current slider controls panel
 
-1. Fork it
-2. Create your feature branch (`git checkout -b my-new-feature`)
-3. Commit your changes (`git commit -am 'Add some feature'`)
-4. Push to the branch (`git push origin my-new-feature`)
-5. Create new Pull Request
+You are able to use this properties in order to control the *rails slider* behavior.

data/lib/generators/railslider_generator.rb

@@ -0,0 +1,26 @@
+class RailsliderGenerator < Rails::Generators::Base
+  source_root File.expand_path('../templates', __FILE__)
+
+  desc  'Generates ruby class and css classes for rails CSS3 animations image slider'
+
+  argument :name, type: 'string', required: true,
+           desc: 'specifies generated ruby class name'
+
+  def generate_layout
+    template 'railslider.rb',
+             "app/railslider/#{get_file_name}.rb"
+    template 'transitions.css.sass.erb',
+             "vendor/assets/stylesheets/railslider/#{get_file_name}/transitions.css.sass"
+  end
+
+  private
+
+  def get_file_name
+    name.underscore
+  end
+
+  def get_class_name
+    name.camelize
+  end
+
+end

data/lib/generators/templates/railslider.rb

@@ -0,0 +1,18 @@
+class <%= get_class_name %> < Railslider::Image
+
+  #
+  def render_multi_flips
+    @result_html = ''
+    for index in 1 .. 7
+      @result_html +=
+          "
+        <div class=\"rs-multi-flip rs-card rs-flip#{index}\">
+          <div class=\"rs-front\"></div>
+          <div class=\"rs-back\"></div>
+        </div>
+        "
+    end
+    @result_html
+  end
+
+end

data/lib/generators/templates/transitions.css.sass.erb

@@ -0,0 +1,1571 @@
+$image_width: 329 //+ 3
+$image_height: 425 //+ 5
+
+$slices_count: 7
+
+//multi-flip animations
+$slices_width: $image_width / $slices_count
+$slices_middle: ($slices_count+1) / 2
+
+.<%= get_class_name %>
+  .rs-transition, .rs-cover.rs-hide, .rs-images
+    display: none
+  .rs-transition, .rs-cover
+    position: absolute
+    width: #{$image_width}px
+    height: #{$image_height}px
+    top: 0px
+    left: 0px
+  .rs-transition.rs-show
+    display: block
+  .rs-card, .rs-back, .rs-front
+    width: 100%
+    height: 100%
+    position: absolute
+  .rs-card, .rs-cover, .rs-transition
+    -webkit-transform-style: preserve-3d
+    transform-style: preserve-3d
+
+/* ********************** ********************** ************ ********************** ********************** */
+/* ********************** ********************** Flip Effects ********************** ********************** */
+/* ********************** ********************** ************ ********************** ********************** */
+
+.<%= get_class_name %>
+  .rs-flip01, .rs-flip02, .rs-flip03, .rs-flip04
+    .rs-multi-flip, .rs-cube, .rs-unfold
+      display: none
+
+/* ********************** Flip 01 ********************** */
+
+.<%= get_class_name %>
+  .rs-flip01
+    .rs-front, .rs-back
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    .rs-back
+      -webkit-transform: rotate3d(1, 0, 0, -180deg)
+      transition: rotate3d(1, 0, 0, -180deg)
+    &.rs-show .rs-card
+      -webkit-animation: rs-flip01 1s ease-in-out forwards
+      animation: rs-flip01 1s ease-in-out forwards
+
+@-webkit-keyframes rs-flip01
+  0%
+    -webkit-transform: rotate3d(1, 0, 0, 0deg)
+  100%
+    -webkit-transform: rotate3d(1, 0, 0, -180deg)
+
+@keyframes rs-flip01
+  0%
+    transform: rotate3d(1, 0, 0, 0deg)
+  100%
+    transform: rotate3d(1, 0, 0, -180deg)
+
+/* ********************** Flip 02 ********************** */
+
+.<%= get_class_name %>
+  .rs-flip02
+    .rs-front, .rs-back
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    .rs-back
+      -webkit-transform: rotate3d(1, 0, 0, -180deg)
+      transform: rotate3d(1, 0, 0, -180deg)
+    &.rs-show .rs-card
+      -webkit-animation: rs-flip02 1s ease-in-out forwards
+      -webkit-transform-origin: 50% 0%
+      animation: rs-flip02 1s ease-in-out forwards
+      transform-origin: 50% 0%
+
+@-webkit-keyframes rs-flip02
+  0%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  100%
+    -webkit-transform: rotate3d(1, 0, 0, -180deg) translate3d(0, -#{$image_height}px, 0)
+
+@keyframes rs-flip02
+  0%
+    transform: rotate3d(1, 0, 0, 0)
+  100%
+    transform: rotate3d(1, 0, 0, -180deg) translate3d(0, -#{$image_height}px, 0)
+
+/* ********************** Flip 03 ********************** */
+
+.<%= get_class_name %>
+  .rs-flip03
+    .rs-front, .rs-back
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    .rs-back
+      -webkit-transform: rotate3d(0, 1, 0, -180deg)
+      transform: rotate3d(0, 1, 0, -180deg)
+    &.rs-show .rs-card
+      -webkit-animation: rs-flip03 1s ease-in-out forwards
+      animation: rs-flip03 1s ease-in-out forwards
+
+@-webkit-keyframes rs-flip03
+  0%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  50%
+    -webkit-transform: rotate3d(0, 1, 0, -190deg)
+  70%
+    -webkit-transform: rotate3d(0, 1, 0, -172deg)
+  80%
+    -webkit-transform: rotate3d(0, 1, 0, -180deg)
+  95%
+    -webkit-transform: rotate3d(0, 1, 0, -178deg)
+  100%
+    -webkit-transform: rotate3d(0, 1, 0, -180deg)
+
+@keyframes rs-flip03
+  0%
+    transform: rotate3d(0, 1, 0, 0)
+  50%
+    transform: rotate3d(0, 1, 0, -190deg)
+  70%
+    transform: rotate3d(0, 1, 0, -172deg)
+  80%
+    transform: rotate3d(0, 1, 0, -180deg)
+  95%
+    transform: rotate3d(0, 1, 0, -178deg)
+  100%
+    transform: rotate3d(0, 1, 0, -180deg)
+
+/* ********************** Flip 04 ********************** */
+
+.<%= get_class_name %>
+  .rs-flip04
+    .rs-front, .rs-back
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    .rs-back
+      -webkit-transform: rotate3d(0, 1, 0, -180deg)
+      transform: rotate3d(0, 1, 0, -180deg)
+    &.rs-show .rs-card
+      -webkit-animation: rs-flip04 1s ease-in-out forwards
+      -webkit-transform-origin: 100% 50%
+      animation: rs-flip04 1s ease-in-out forwards
+      transform-origin: 100% 50%
+
+@-webkit-keyframes rs-flip04
+  0%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  100%
+    -webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(#{$image_width}px, 0, 0)
+
+@keyframes rs-flip04
+  0%
+    transform: rotate3d(0, 1, 0, 0)
+  100%
+    transform: rotate3d(0, 1, 0, -180deg) translate3d(#{$image_width}px, 0, 0)
+
+/* ********************** ********************** **************** ********************** ********************** */
+/* ********************** ********************** Rotation Effects ********************** ********************** */
+/* ********************** ********************** **************** ********************** ********************** */
+
+.<%= get_class_name %>
+  .rs-rotation01, .rs-rotation02, .rs-rotation03, .rs-rotation04, .rs-rotation05, .rs-rotation06
+    .rs-multi-flip, .rs-cube, .rs-unfold
+      display: none
+
+/* ********************** Rotation 01 ********************** */
+
+.<%= get_class_name %>
+  .rs-rotation01
+    .rs-front
+      z-index: 2
+    .rs-back
+      z-index: 1
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    &.rs-show
+      .rs-front, .rs-back
+        -webkit-transform-origin: 50% 100%
+        transform-origin: 50% 100%
+      .rs-front
+        -webkit-animation: rs-rotation01Front 0.8s linear
+        animation: rs-rotation01Front 0.8s linear
+      .rs-back
+        -webkit-animation: rs-rotation01Back 0.8s linear
+        animation: rs-rotation01Back 0.8s linear
+
+@-webkit-keyframes rs-rotation01Front
+  0%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+    opacity: 1
+  50%
+    -webkit-transform: rotate3d(1, 0, 0, -90deg)
+    opacity: 0.5
+  100%
+    -webkit-transform: rotate3d(1, 0, 0, -180deg)
+    opacity: 0
+
+@-webkit-keyframes rs-rotation01Back
+  0%
+    -webkit-transform: rotate3d(1, 0, 0, 90deg)
+    opacity: 0
+  30%
+    -webkit-transform: rotate3d(1, 0, 0, 90deg)
+    opacity: 0
+  100%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+    opacity: 1
+
+@keyframes rs-rotation01Front
+  0%
+    transform: rotate3d(1, 0, 0, 0)
+    opacity: 1
+  50%
+    transform: rotate3d(1, 0, 0, -90deg)
+    opacity: 0.5
+  100%
+    transform: rotate3d(1, 0, 0, -180deg)
+    opacity: 0
+
+@keyframes rs-rotation01Back
+  0%
+    transform: rotate3d(1, 0, 0, 90deg)
+    opacity: 0
+  30%
+    transform: rotate3d(1, 0, 0, 90deg)
+    opacity: 0
+  100%
+    transform: rotate3d(1, 0, 0, 0)
+    opacity: 1
+
+/* ********************** Rotation 02 ********************** */
+
+.<%= get_class_name %>
+  .rs-rotation02
+    .rs-front
+      z-index: 2
+    .rs-back
+      z-index: 1
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    &.rs-show .rs-front
+      -webkit-animation: rs-rotation02Front 0.8s linear
+      -webkit-transform-origin: 50% 100%
+      animation: rs-rotation02Front 0.8s linear
+      transform-origin: 50% 100%
+
+@-webkit-keyframes rs-rotation02Front
+  0%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+    opacity: 1
+  50%
+    -webkit-transform: rotate3d(1, 0, 0, -90deg)
+    opacity: 1
+  90%
+    -webkit-transform: rotate3d(1, 0, 0, -260deg)
+    opacity: 0
+  100%
+    -webkit-transform: rotate3d(1, 0, 0, -270deg)
+    opacity: 0
+
+@keyframes rs-rotation02Front
+  0%
+    transform: rotate3d(1, 0, 0, 0)
+    opacity: 1
+  50%
+    transform: rotate3d(1, 0, 0, -90deg)
+    opacity: 1
+  90%
+    transform: rotate3d(1, 0, 0, -260deg)
+    opacity: 0
+  100%
+    transform: rotate3d(1, 0, 0, -270deg)
+    opacity: 0
+
+/* ********************** Rotation 03 ********************** */
+
+.<%= get_class_name %>
+  .rs-rotation03
+    .rs-front
+      z-index: 2
+    .rs-back
+      z-index: 1
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    &.rs-show .rs-front
+      -webkit-animation: rs-rotation03Front 0.8s linear
+      -webkit-transform-origin: 100% 50%
+      animation: rs-rotation03Front 0.8s linear
+      transform-origin: 100% 50%
+
+@-webkit-keyframes rs-rotation03Front
+  0%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+    opacity: 1
+  50%
+    -webkit-transform: rotate3d(0, 1, 0, 90deg)
+    opacity: 1
+  100%
+    -webkit-transform: rotate3d(0, 1, 0, 180deg)
+    opacity: 0
+
+@keyframes rs-rotation03Front
+  0%
+    transform: rotate3d(0, 1, 0, 0)
+    opacity: 1
+  50%
+    transform: rotate3d(0, 1, 0, 90deg)
+    opacity: 1
+  100%
+    transform: rotate3d(0, 1, 0, 180deg)
+    opacity: 0
+
+/* ********************** Rotation 04 ********************** */
+
+.<%= get_class_name %>
+  .rs-rotation04
+    .rs-front
+      z-index: 2
+    .rs-back
+      z-index: 1
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    &.rs-show
+      .rs-front, .rs-back
+        -webkit-transform-origin: 0% 50%
+        transform-origin: 0% 50%
+      .rs-front
+        -webkit-animation: rs-rotation04Front 0.8s linear
+        animation: rs-rotation04Front 0.8s linear
+      .rs-back
+        -webkit-animation: rs-rotation04Back 0.8s ease-in-out
+        animation: rs-rotation04Back 0.8s ease-in-out
+
+@-webkit-keyframes rs-rotation04Front
+  0%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+    opacity: 1
+    -webkit-animation-timing-function: ease-in
+  30%
+    -webkit-transform: rotate3d(0, 1, 0, -90deg)
+    opacity: 0.5
+    -webkit-animation-timing-function: ease-out
+  100%
+    -webkit-transform: rotate3d(0, 1, 0, -180deg)
+    opacity: 0
+
+@-webkit-keyframes rs-rotation04Back
+  0%
+    opacity: 0
+    -webkit-transform: rotate3d(0, 1, 0, 90deg)
+  30%
+    -webkit-transform: rotate3d(0, 1, 0, 90deg)
+    opacity: 0
+  60%
+    -webkit-transform: rotate3d(0, 1, 0, -13deg)
+    opacity: 1
+  70%
+    -webkit-transform: rotate3d(0, 1, 0, 8deg)
+    opacity: 1
+  80%
+    -webkit-transform: rotate3d(0, 1, 0, 0deg)
+    opacity: 1
+  95%
+    -webkit-transform: rotate3d(0, 1, 0, 3deg)
+    opacity: 1
+  100%
+    -webkit-transform: rotate3d(0, 1, 0, 0deg)
+    opacity: 1
+
+@keyframes rs-rotation04Front
+  0%
+    transform: rotate3d(0, 1, 0, 0)
+    opacity: 1
+    animation-timing-function: ease-in
+  30%
+    transform: rotate3d(0, 1, 0, -90deg)
+    opacity: 0.5
+    animation-timing-function: ease-out
+  100%
+    transform: rotate3d(0, 1, 0, -180deg)
+    opacity: 0
+
+@keyframes rs-rotation04Back
+  0%
+    opacity: 0
+    transform: rotate3d(0, 1, 0, 90deg)
+  30%
+    transform: rotate3d(0, 1, 0, 90deg)
+    opacity: 0
+  60%
+    transform: rotate3d(0, 1, 0, -13deg)
+    opacity: 1
+  70%
+    transform: rotate3d(0, 1, 0, 8deg)
+    opacity: 1
+  80%
+    transform: rotate3d(0, 1, 0, 0deg)
+    opacity: 1
+  95%
+    transform: rotate3d(0, 1, 0, 3deg)
+    opacity: 1
+  100%
+    transform: rotate3d(0, 1, 0, 0deg)
+    opacity: 1
+
+/* ********************** Rotation 05 ********************** */
+
+.<%= get_class_name %>
+  .rs-rotation05
+    .rs-front
+      z-index: 2
+    .rs-back
+      z-index: 1
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    &.rs-show .rs-front
+      -webkit-transform-origin: 0% 50%
+      -webkit-animation: rs-rotation05Front 0.8s linear
+      transform-origin: 0% 50%
+      animation: rs-rotation05Front 0.8s linear
+
+@-webkit-keyframes rs-rotation05Front
+  0%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+    opacity: 1
+  50%
+    -webkit-transform: translateX(-200px) translateZ(100px) rotate3d(0, 1, 0, -120deg)
+    opacity: 0.5
+  100%
+    -webkit-transform: translateX(-400px) translateZ(200px) rotate3d(0, 1, 0, -240deg)
+    opacity: 0
+
+@keyframes rs-rotation05Front
+  0%
+    transform: rotate3d(0, 1, 0, 0)
+    opacity: 1
+  50%
+    transform: translateX(-200px) translateZ(100px) rotate3d(0, 1, 0, -120deg)
+    opacity: 0.5
+  100%
+    transform: translateX(-400px) translateZ(200px) rotate3d(0, 1, 0, -240deg)
+    opacity: 0
+
+/* ********************** ********************** ****************** ********************** ********************** */
+/* ********************** ********************** Multi-flip Effects ********************** ********************** */
+/* ********************** ********************** ****************** ********************** ********************** */
+
+.<%= get_class_name %>
+  .rs-multi-flip01, .rs-multi-flip02, .rs-multi-flip03
+    .rs-flip, .rs-cube, .rs-unfold
+      display: none
+    .rs-back, .rs-front
+      width: #{$slices_width}px
+      height: 100%
+      overflow: hidden
+      position: absolute
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    .rs-front
+      z-index: 2
+    .rs-back
+      z-index: 1
+    &.rs-transition
+      img
+        position: absolute
+      @for $i from 1 through $slices_count
+        .rs-flip#{$i} img
+          left: -#{($i - 1) * $slices_width}px
+    @for $i from 1 through $slices_count
+      .rs-flip#{$i}
+        left: #{($i - 1) * $slices_width}px
+
+/* ********************** Multi-flip 01 ********************** */
+
+$slices_animation_first_step: 60
+$slices_animation_step_value: (100-$slices_animation_first_step) / $slices_count
+
+.<%= get_class_name %>
+  .rs-multi-flip01
+    .rs-back
+      -webkit-transform: rotate3d(1, 0, 0, -180deg)
+      transform: rotate3d(1, 0, 0, -180deg)
+    &.rs-show .rs-card
+      -webkit-animation-duration: 1.5s
+      -webkit-animation-timing-function: ease-in-out
+      -webkit-animation-fill-mode: forwards
+      animation-duration: 1.5s
+      animation-timing-function: ease-in-out
+      animation-fill-mode: forwards
+    @for $i from 1 through $slices_count
+      @if $i <= $slices_middle
+        .rs-flip#{$i}
+          z-index: #{$i}
+          -webkit-animation-name: rs-multiflip1_#{$slices_middle - $i + 1}
+          animation-name: rs-multiflip1_#{$slices_middle - $i + 1}
+      @else
+        .rs-flip#{$i}
+          z-index: #{$slices_count - $i + 1}
+          -webkit-animation-name: rs-multiflip1_#{$slices_middle - $slices_count + $i}
+          animation-name: rs-multiflip1_#{$slices_middle - $slices_count + $i}
+
+@-webkit-keyframes rs-multiflip1_1
+  0%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  #{$slices_animation_first_step}%
+    -webkit-transform: rotate3d(1, 0, 0, -180deg)
+  100%
+    -webkit-transform: rotate3d(1, 0, 0, -180deg)
+
+@for $i from 2 through $slices_middle
+  @-webkit-keyframes rs-multiflip1_#{$i}
+    0%
+      -webkit-transform: rotate3d(1, 0, 0, 0)
+    #{($i - 1) * $slices_animation_step_value}%
+      -webkit-transform: rotate3d(1, 0, 0, 0)
+    #{$slices_animation_first_step + ($i - 1) * $slices_animation_step_value}%
+      -webkit-transform: rotate3d(1, 0, 0, -180deg)
+    100%
+      -webkit-transform: rotate3d(1, 0, 0, -180deg)
+
+@keyframes rs-multiflip1_1
+  0%
+    transform: rotate3d(1, 0, 0, 0)
+  #{$slices_animation_first_step}%
+    transform: rotate3d(1, 0, 0, -180deg)
+  100%
+    transform: rotate3d(1, 0, 0, -180deg)
+
+@for $i from 2 through $slices_middle
+  @keyframes rs-multiflip1_#{$i}
+    0%
+      transform: rotate3d(1, 0, 0, 0)
+    #{($i - 1) * $slices_animation_step_value}%
+      transform: rotate3d(1, 0, 0, 0)
+    #{$slices_animation_first_step + ($i - 1) * $slices_animation_step_value}%
+      transform: rotate3d(1, 0, 0, -180deg)
+    100%
+      transform: rotate3d(1, 0, 0, -180deg)
+
+/* ********************** Multi-flip 02 ********************** */
+
+$slices_animation_first_step:  33
+$slices_animation_step_value: $slices_animation_first_step / $slices_count
+
+.<%= get_class_name %>
+  .rs-multi-flip02
+    .rs-back
+      -webkit-transform: rotate3d(1, 0, 0, -180deg)
+      transform: rotate3d(1, 0, 0, -180deg)
+    &.rs-show .rs-card
+      -webkit-animation-duration: 1.5s
+      -webkit-animation-timing-function: ease-in-out
+      -webkit-animation-fill-mode: forwards
+      animation-duration: 1.5s
+      animation-timing-function: ease-in-out
+      animation-fill-mode: forwards
+    @for $i from 1 through $slices_count
+      @if $i <= $slices_middle
+        .rs-flip#{$i}
+          z-index: #{$i}
+          -webkit-animation-name: rs-multiflip2_#{$i}
+          animation-name: rs-multiflip2_#{$i}
+      @else
+        .rs-flip#{$i}
+          z-index: #{$slices_count - $i + 1}
+          -webkit-animation-name: rs-multiflip2_#{$i}
+          animation-name: rs-multiflip2_#{$i}
+
+@-webkit-keyframes rs-multiflip2_1
+  0%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  #{$slices_animation_first_step}%
+    -webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -200px, 0)
+  #{$slices_animation_first_step * 2}%
+    -webkit-transform: rotate3d(1, 0, 0, 180deg)
+  100%
+    -webkit-transform: rotate3d(1, 0, 0, 180deg) translate3d(0, 0, 0)
+
+@for $i from 2 through $slices_count
+  @-webkit-keyframes rs-multiflip2_#{$i}
+    0%
+      -webkit-transform: rotate3d(1, 0, 0, 0)
+    #{$slices_animation_step_value * ($i - 1)}%
+      -webkit-transform: rotate3d(1, 0, 0, 0)
+    #{$slices_animation_first_step + $slices_animation_step_value * ($i - 1)}%
+      -webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -200px, 0)
+    #{$slices_animation_first_step * 2 + $slices_animation_step_value * ($i - 1)}%
+      -webkit-transform: rotate3d(1, 0, 0, 180deg)
+    100%
+      -webkit-transform: rotate3d(1, 0, 0, 180deg) translate3d(0, 0, 0)
+
+@keyframes rs-multiflip2_1
+  0%
+    transform: rotate3d(1, 0, 0, 0)
+  #{$slices_animation_first_step}%
+    transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -200px, 0)
+  #{$slices_animation_first_step * 2}%
+    transform: rotate3d(1, 0, 0, 180deg)
+  100%
+    transform: rotate3d(1, 0, 0, 180deg) translate3d(0, 0, 0)
+
+@for $i from 2 through $slices_count
+  @keyframes rs-multiflip2_#{$i}
+    0%
+      transform: rotate3d(1, 0, 0, 0)
+    #{$slices_animation_step_value * ($i - 1)}%
+      transform: rotate3d(1, 0, 0, 0)
+    #{$slices_animation_first_step + $slices_animation_step_value * ($i - 1)}%
+      transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -200px, 0)
+    #{$slices_animation_first_step * 2 + $slices_animation_step_value * ($i - 1)}%
+      transform: rotate3d(1, 0, 0, 180deg)
+    100%
+      transform: rotate3d(1, 0, 0, 180deg) translate3d(0, 0, 0)
+
+/* ********************** Multi-flip 03 ********************** */
+
+$slices_animation_first_step:  33
+$slices_animation_step_value: $slices_animation_first_step / $slices_count
+
+.<%= get_class_name %>
+  .rs-multi-flip03
+    .rs-back
+      -webkit-transform: rotate3d(0, 1, 0, -180deg)
+      transform: rotate3d(0, 1, 0, -180deg)
+    &.rs-show .rs-card
+      -webkit-animation-duration: 1.5s
+      -webkit-animation-timing-function: ease-in-out
+      -webkit-animation-fill-mode: forwards
+      -webkit-transform-origin: 0% 50%
+      animation-duration: 1.5s
+      animation-timing-function: ease-in-out
+      animation-fill-mode: forwards
+      transform-origin: 0% 50%
+    @for $i from 1 through $slices_count
+      @if $i <= $slices_middle
+        .rs-flip#{$i}
+          z-index: #{$i}
+          -webkit-animation-name: rs-multiflip3_#{$i}
+          animation-name: rs-multiflip3_#{$i}
+      @else
+        .rs-flip#{$i}
+          z-index: #{$slices_count - $i + 1}
+          -webkit-animation-name: rs-multiflip3_#{$i}
+          animation-name: rs-multiflip3_#{$i}
+
+@-webkit-keyframes rs-multiflip3_1
+  0%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  #{$slices_animation_first_step * 2}%
+    -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(-#{$slices_width}px, 0, 0)
+  100%
+    -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(-#{$slices_width}px, 0, 0)
+
+@for $i from 2 through $slices_count
+  @-webkit-keyframes rs-multiflip3_#{$i}
+    0%
+      -webkit-transform: rotate3d(0, 1, 0, 0)
+    #{$slices_animation_step_value * ($i - 1)}%
+      -webkit-transform: rotate3d(0, 1, 0, 0)
+    #{$slices_animation_first_step * 2 + $slices_animation_step_value * ($i - 1)}%
+      -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(-#{$slices_width}px, 0, 0)
+    100%
+      -webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(-#{$slices_width}px, 0, 0)
+
+@keyframes rs-multiflip3_1
+  0%
+    transform: rotate3d(0, 1, 0, 0)
+  #{$slices_animation_first_step * 2}%
+    transform: rotate3d(0, 1, 0, 180deg) translate3d(-#{$slices_width}px, 0, 0)
+  100%
+    transform: rotate3d(0, 1, 0, 180deg) translate3d(-#{$slices_width}px, 0, 0)
+
+@for $i from 2 through $slices_count
+  @keyframes rs-multiflip3_#{$i}
+    0%
+      transform: rotate3d(0, 1, 0, 0)
+    #{$slices_animation_step_value * ($i - 1)}%
+      transform: rotate3d(0, 1, 0, 0)
+    #{$slices_animation_first_step * 2 + $slices_animation_step_value * ($i - 1)}%
+      transform: rotate3d(0, 1, 0, 180deg) translate3d(-#{$slices_width}px, 0, 0)
+    100%
+      transform: rotate3d(0, 1, 0, 180deg) translate3d(-#{$slices_width}px, 0, 0)
+
+/* ********************** ********************** ************ ********************** ********************** */
+/* ********************** ********************** Cube Effects ********************** ********************** */
+/* ********************** ********************** ************ ********************** ********************** */
+
+.<%= get_class_name %>
+  .rs-cube01, .rs-cube02, .rs-cube03, .rs-cube04
+    .rs-flip, .rs-multi-flip, .rs-unfold
+      display: none
+    .rs-card
+      display: none
+    .rs-back
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+      z-index: 1
+    .rs-front
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+      z-index: 2
+    .rs-cube-face
+      position: absolute
+      width: 329px
+      height: 425px
+      display: block
+      overflow: hidden
+
+/* ********************** Cube 01 ********************** */
+
+.<%= get_class_name %>
+  .rs-cube01
+    .rs-cube-front
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) translate3d(0, 0, 212px)
+    .rs-cube-top
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 212px)
+    .rs-cube-bottom
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 212px)
+    .rs-cube-right
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 212px)
+    .rs-cube-left
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 212px)
+    &.rs-show
+      -webkit-animation: rs-cube1 0.5s ease-in-out
+      animation: rs-cube1 0.5s ease-in-out
+
+@-webkit-keyframes rs-cube1
+  0%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  100%
+    -webkit-transform: rotate3d(1, 0, 0, -90deg)
+
+@keyframes rs-cube1
+  0%
+    transform: rotate3d(1, 0, 0, 0)
+  100%
+    transform: rotate3d(1, 0, 0, -90deg)
+
+/* ********************** Cube 02 ********************** */
+
+.<%= get_class_name %>
+  .rs-cube02
+    .rs-cube-front
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) translate3d(0, 0, 212px)
+    .rs-cube-bottom
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 212px)
+    .rs-cube-top
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 212px)
+    .rs-cube-right
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 212px)
+    .rs-cube-left
+      -webkit-transform: scale3d(0.825, 0.825, 0.825) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 212px)
+      transform: scale3d(0.825, 0.825, 0.825) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 212px)
+    &.rs-show
+      -webkit-animation: rs-cube2 0.5s ease-in-out
+      animation: rs-cube2 0.5s ease-in-out
+
+@-webkit-keyframes rs-cube2
+  0%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  100%
+    -webkit-transform: rotate3d(1, 0, 0, 90deg)
+
+@keyframes rs-cube2
+  0%
+    transform: rotate3d(1, 0, 0, 0)
+  100%
+    transform: rotate3d(1, 0, 0, 90deg)
+
+/* ********************** Cube 03 ********************** */
+
+.<%= get_class_name %>
+  .rs-cube03
+    .rs-cube-front
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) translate3d(0, 0, 164px)
+    .rs-cube-right
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 164px)
+    .rs-cube-left
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 164px)
+    .rs-cube-top
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 164px)
+    .rs-cube-bottom
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 164px)
+    &.rs-show
+      -webkit-animation: rs-cube3 1s ease-in-out
+      animation: rs-cube3 1s ease-in-out
+
+@-webkit-keyframes rs-cube3
+  0%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  40%
+    -webkit-transform: rotate3d(0, 1, 0, -100deg)
+  60%
+    -webkit-transform: rotate3d(0, 1, 0, -84deg)
+  80%
+    -webkit-transform: rotate3d(0, 1, 0, -90deg)
+  95%
+    -webkit-transform: rotate3d(0, 1, 0, -88deg)
+  100%
+    -webkit-transform: rotate3d(0, 1, 0, -90deg)
+
+@keyframes rs-cube3
+  0%
+    transform: rotate3d(0, 1, 0, 0)
+  40%
+    transform: rotate3d(0, 1, 0, -100deg)
+  60%
+    transform: rotate3d(0, 1, 0, -84deg)
+  80%
+    transform: rotate3d(0, 1, 0, -90deg)
+  95%
+    transform: rotate3d(0, 1, 0, -88deg)
+  100%
+    transform: rotate3d(0, 1, 0, -90deg)
+
+/* ********************** Cube 04 ********************** */
+
+.<%= get_class_name %>
+  .rs-cube04
+    .rs-cube-front
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) translate3d(0, 0, 164px)
+    .rs-cube-left
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 164px)
+    .rs-cube-right
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 164px)
+    .rs-cube-top
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 164px)
+    .rs-cube-bottom
+      -webkit-transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 164px)
+      transform: scale3d(0.858, 0.858, 0.858) rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 164px)
+    &.rs-show
+      -webkit-animation: rs-cube4 0.5s ease-in-out
+      animation: rs-cube4 0.5s ease-in-out
+
+@-webkit-keyframes rs-cube4
+  0%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  100%
+    -webkit-transform: rotate3d(0, 1, 0, 90deg)
+
+@keyframes rs-cube4
+  0%
+    transform: rotate3d(0, 1, 0, 0)
+  100%
+    transform: rotate3d(0, 1, 0, 90deg)
+
+/* ********************** ********************** ************** ********************** ********************** */
+/* ********************** ********************** Unfold Effects ********************** ********************** */
+/* ********************** ********************** ************** ********************** ********************** */
+
+.<%= get_class_name %>
+  .rs-unfold01, .rs-unfold02
+    .rs-flip, .rs-multi-flip, .rs-cube
+      display: none
+    .rs-back, .rs-front
+      overflow: hidden
+      position: absolute
+      opacity: 0
+      -webkit-backface-visibility: hidden
+      backface-visibility: hidden
+    &.rs-transition img
+      position: absolute
+      left: 0px
+      top: 0px
+
+/* ********************** Unfold 01 ********************** */
+
+.<%= get_class_name %>
+  .rs-unfold01
+    .rs-front
+      -webkit-transform-origin: 50% 100%
+      transform-origin: 50% 100%
+    .rs-back
+      -webkit-transform-origin: 50% 0%
+      transform-origin: 50% 0%
+    .rs-front, .rs-back
+      width: 100%
+      height: 142px
+    .rs-front.rs-front2, .rs-back.rs-back2
+      top: 142px
+    .rs-front.rs-front2 img, .rs-back.rs-back2 img
+      top: -142px
+    .rs-front.rs-front3, .rs-back.rs-back3
+      top: 284px
+    .rs-front.rs-front3 img, .rs-back.rs-back3 img
+      top: -284px
+    &.rs-show
+      .rs-front
+        &.rs-front1
+          -webkit-animation: rs-unfold1_1Front 1s ease-in-out
+          animation: rs-unfold1_1Front 1s ease-in-out
+        &.rs-front2
+          -webkit-animation: rs-unfold1_2Front 1s ease-in-out
+          animation: rs-unfold1_2Front 1s ease-in-out
+        &.rs-front3
+          -webkit-animation: rs-unfold1_3Front 1s ease-in-out
+          animation: rs-unfold1_3Front 1s ease-in-out
+      .rs-back
+        &.rs-back1
+          -webkit-animation: rs-unfold1_1Back 1s ease-in-out
+          -webkit-animation-delay: 0.7s
+          animation: rs-unfold1_1Back 1s ease-in-out
+          animation-delay: 0.7s
+        &.rs-back2
+          -webkit-animation: rs-unfold1_2Back 1s ease-in-out
+          -webkit-animation-delay: 0.7s
+          animation: rs-unfold1_2Back 1s ease-in-out
+          animation-delay: 0.7s
+        &.rs-back3
+          -webkit-animation: rs-unfold1_3Back 1s ease-in-out
+          -webkit-animation-delay: 0.7s
+          animation: rs-unfold1_3Back 1s ease-in-out
+          animation-delay: 0.7s
+
+@-webkit-keyframes rs-unfold1_1Front
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  33%
+    -webkit-transform: rotate3d(1, 0, 0, 100deg)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 100deg)
+
+@-webkit-keyframes rs-unfold1_2Front
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  33%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  66%
+    -webkit-transform: rotate3d(1, 0, 0, 100deg)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 100deg)
+
+@-webkit-keyframes rs-unfold1_3Front
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  66%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  83%
+    -webkit-transform: rotate3d(1, 0, 0, 50deg)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 100deg)
+
+@-webkit-keyframes rs-unfold1_1Back
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, -100deg)
+  30%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+
+@-webkit-keyframes rs-unfold1_2Back
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, -100deg)
+  26%
+    -webkit-transform: rotate3d(1, 0, 0, -100deg)
+  60%
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+
+@-webkit-keyframes rs-unfold1_3Back
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, -100deg)
+  55%
+    -webkit-transform: rotate3d(1, 0, 0, -100deg)
+  78%
+    -webkit-transform: rotate3d(1, 0, 0, 28deg)
+  86%
+    -webkit-transform: rotate3d(1, 0, 0, -28deg)
+  94%
+    -webkit-transform: rotate3d(1, 0, 0, 12deg)
+  98%
+    -webkit-transform: rotate3d(1, 0, 0, -12deg)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(1, 0, 0, 0)
+
+@keyframes rs-unfold1_1Front
+  0%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 0)
+  33%
+    transform: rotate3d(1, 0, 0, 100deg)
+  100%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 100deg)
+
+@keyframes rs-unfold1_2Front
+  0%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 0)
+  33%
+    transform: rotate3d(1, 0, 0, 0)
+  66%
+    transform: rotate3d(1, 0, 0, 100deg)
+  100%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 100deg)
+
+@keyframes rs-unfold1_3Front
+  0%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 0)
+  66%
+    transform: rotate3d(1, 0, 0, 0)
+  83%
+    transform: rotate3d(1, 0, 0, 50deg)
+  100%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 100deg)
+
+@keyframes rs-unfold1_1Back
+  0%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, -100deg)
+  30%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 0)
+  100%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 0)
+
+@keyframes rs-unfold1_2Back
+  0%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, -100deg)
+  26%
+    transform: rotate3d(1, 0, 0, -100deg)
+  60%
+    transform: rotate3d(1, 0, 0, 0)
+  100%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 0)
+
+@keyframes rs-unfold1_3Back
+  0%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, -100deg)
+  55%
+    transform: rotate3d(1, 0, 0, -100deg)
+  78%
+    transform: rotate3d(1, 0, 0, 28deg)
+  86%
+    transform: rotate3d(1, 0, 0, -28deg)
+  94%
+    transform: rotate3d(1, 0, 0, 12deg)
+  98%
+    transform: rotate3d(1, 0, 0, -12deg)
+  100%
+    opacity: 1
+    transform: rotate3d(1, 0, 0, 0)
+
+/* ********************** Unfold 02 ********************** */
+
+.<%= get_class_name %>
+  .rs-unfold02
+    .rs-front
+      -webkit-transform-origin: 100% 50%
+      transform-origin: 100% 50%
+    .rs-back
+      -webkit-transform-origin: 0% 50%
+      transform-origin: 0% 50%
+    .rs-front, .rs-back
+      width: 110px
+      height: 100%
+    .rs-front.rs-front2, .rs-back.rs-back2
+      left: 110px
+    .rs-front.rs-front2 img, .rs-back.rs-back2 img
+      left: -110px
+    .rs-front.rs-front3, .rs-back.rs-back3
+      left: 220px
+    .rs-front.rs-front3 img, .rs-back.rs-back3 img
+      left: -220px
+    &.rs-show
+      .rs-front
+        &.rs-front1
+          -webkit-animation: rs-unfold2_1Front 1s ease-in-out
+          animation: rs-unfold2_1Front 1s ease-in-out
+        &.rs-front2
+          -webkit-animation: rs-unfold2_2Front 1s ease-in-out
+          animation: rs-unfold2_2Front 1s ease-in-out
+        &.rs-front3
+          -webkit-animation: rs-unfold2_3Front 1s ease-in-out
+          animation: rs-unfold2_3Front 1s ease-in-out
+      .rs-back
+        &.rs-back1
+          -webkit-animation: rs-unfold2_1Back 1s ease-in-out
+          -webkit-animation-delay: 0.9s
+          animation: rs-unfold2_1Back 1s ease-in-out
+          animation-delay: 0.9s
+        &.rs-back2
+          -webkit-animation: rs-unfold2_2Back 1s ease-in-out
+          -webkit-animation-delay: 0.9s
+          animation: rs-unfold2_2Back 1s ease-in-out
+          animation-delay: 0.9s
+        &.rs-back3
+          -webkit-animation: rs-unfold2_3Back 1s ease-in-out
+          -webkit-animation-delay: 0.9s
+          animation: rs-unfold2_3Back 1s ease-in-out
+          animation-delay: 0.9s
+
+@-webkit-keyframes rs-unfold2_1Front
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  33%
+    -webkit-transform: rotate3d(0, 1, 0, -100deg)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, -100deg)
+
+@-webkit-keyframes rs-unfold2_2Front
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  33%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  66%
+    -webkit-transform: rotate3d(0, 1, 0, -100deg)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, -100deg)
+
+@-webkit-keyframes rs-unfold2_3Front
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  66%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  83%
+    -webkit-transform: rotate3d(0, 1, 0, -50)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, -100deg)
+
+@-webkit-keyframes rs-unfold2_1Back
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 100deg)
+  30%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+
+@-webkit-keyframes rs-unfold2_2Back
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 100deg)
+  26%
+    -webkit-transform: rotate3d(0, 1, 0, 100deg)
+  60%
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+
+@-webkit-keyframes rs-unfold2_3Back
+  0%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 100deg)
+  55%
+    -webkit-transform: rotate3d(0, 1, 0, 100deg)
+  78%
+    -webkit-transform: rotate3d(0, 1, 0, -28deg)
+  86%
+    -webkit-transform: rotate3d(0, 1, 0, 28deg)
+  94%
+    -webkit-transform: rotate3d(0, 1, 0, -12deg)
+  98%
+    -webkit-transform: rotate3d(0, 1, 0, 12deg)
+  100%
+    opacity: 1
+    -webkit-transform: rotate3d(0, 1, 0, 0)
+
+@keyframes rs-unfold2_1Front
+  0%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 0)
+  33%
+    transform: rotate3d(0, 1, 0, -100deg)
+  100%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, -100deg)
+
+@keyframes rs-unfold2_2Front
+  0%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 0)
+  33%
+    transform: rotate3d(0, 1, 0, 0)
+  66%
+    transform: rotate3d(0, 1, 0, -100deg)
+  100%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, -100deg)
+
+@keyframes rs-unfold2_3Front
+  0%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 0)
+  66%
+    transform: rotate3d(0, 1, 0, 0)
+  83%
+    transform: rotate3d(0, 1, 0, -50)
+  100%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, -100deg)
+
+@keyframes rs-unfold2_1Back
+  0%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 100deg)
+  30%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 0)
+  100%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 0)
+
+@keyframes rs-unfold2_2Back
+  0%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 100deg)
+  26%
+    transform: rotate3d(0, 1, 0, 100deg)
+  60%
+    transform: rotate3d(0, 1, 0, 0)
+  100%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 0)
+
+@keyframes rs-unfold2_3Back
+  0%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 100deg)
+  55%
+    transform: rotate3d(0, 1, 0, 100deg)
+  78%
+    transform: rotate3d(0, 1, 0, -28deg)
+  86%
+    transform: rotate3d(0, 1, 0, 28deg)
+  94%
+    transform: rotate3d(0, 1, 0, -12deg)
+  98%
+    transform: rotate3d(0, 1, 0, 12deg)
+  100%
+    opacity: 1
+    transform: rotate3d(0, 1, 0, 0)
+
+/* ********************** ********************** ************** ********************** ********************** */
+/* ********************** ********************** Others Effects ********************** ********************** */
+/* ********************** ********************** ************** ********************** ********************** */
+
+.<%= get_class_name %>
+  .rs-other01, .rs-other02, .rs-other03, .rs-other04, .rs-other05, .rs-other06, .rs-other07
+    .rs-front
+      z-index: 2
+    .rs-back
+      z-index: 1
+
+/* ********************** Other 01 ********************** */
+
+.<%= get_class_name %>
+  .rs-other01.rs-show .rs-front
+    -webkit-animation: rs-other1Front 0.6s linear forwards
+    animation: rs-other1Front 0.6s linear forwards
+
+@-webkit-keyframes rs-other1Front
+  0%
+    opacity: 1
+  100%
+    opacity: 0
+
+@keyframes rs-other1Front
+  0%
+    opacity: 1
+  100%
+    opacity: 0
+
+/* ********************** Other 02 ********************** */
+.<%= get_class_name %>
+  .rs-transition.rs-other02
+    overflow: hidden
+
+.<%= get_class_name %>
+  .rs-other02.rs-show
+    .rs-front, .rs-back
+      -webkit-animation-duration: 0.4s
+      -webkit-animation-timing-function: ease-out
+      -webkit-animation-fill-mode: forwards
+      animation-duration: 0.4s
+      animation-timing-function: ease-out
+      animation-fill-mode: forwards
+    .rs-front
+      -webkit-animation-name: rs-other2Front
+      animation-name: rs-other2Front
+    .rs-back
+      -webkit-animation-name: rs-other2Back
+      animation-name: rs-other2Back
+
+@-webkit-keyframes rs-other2Front
+  0%
+    -webkit-transform: translateX(0)
+  100%
+    -webkit-transform: translateX(-#{$image_width}px)
+
+@-webkit-keyframes rs-other2Back
+  0%
+    -webkit-transform: translateX(#{$image_width}px)
+  100%
+    -webkit-transform: translateX(0px)
+
+@keyframes rs-other2Front
+  0%
+    transform: translateX(0)
+  100%
+    transform: translateX(-#{$image_width}px)
+
+@keyframes rs-other2Back
+  0%
+    transform: translateX(#{$image_width}px)
+  100%
+    transform: translateX(0px)
+
+/* ********************** Other 03 ********************** */
+
+.<%= get_class_name %>
+  .rs-other03
+    .rs-front
+      z-index: 1
+    .rs-back
+      z-index: 2
+    &.rs-show .rs-back
+      -webkit-animation: rs-other3Back 0.4s ease-out forwards
+      animation: rs-other3Back 0.4s ease-out forwards
+
+@-webkit-keyframes rs-other3Back
+  0%
+    -webkit-transform: rotate(40deg) scale(1.5) translate(200px, 10px)
+    opacity: 0
+  100%
+    -webkit-transform: rotate(0deg) scale(1) translate(0, 0)
+    opacity: 1
+
+@keyframes rs-other3Back
+  0%
+    transform: rotate(40deg) scale(1.5) translate(200px, 10px)
+    opacity: 0
+  100%
+    transform: rotate(0deg) scale(1) translate(0, 0)
+    opacity: 1
+
+/* ********************** Other 04 ********************** */
+
+.<%= get_class_name %>
+  .rs-other04.rs-show .rs-front
+    -webkit-animation: rs-other4Front 0.8s ease-in-out forwards
+    animation: rs-other4Front 0.8s ease-in-out forwards
+
+@-webkit-keyframes rs-other4Front
+  0%
+    -webkit-transform: translateX(0)
+    z-index: 3
+  50%
+    -webkit-transform: rotateZ(-5deg) translateX(-339px)
+    z-index: 3
+  51%
+    z-index: 1
+  100%
+    -webkit-transform: rotateZ(0deg) translateX(0px)
+    z-index: 1
+
+@keyframes rs-other4Front
+  0%
+    transform: translateX(0)
+    z-index: 3
+  50%
+    transform: rotateZ(-5deg) translateX(-339px)
+    z-index: 3
+  51%
+    z-index: 1
+  100%
+    transform: rotateZ(0deg) translateX(0px)
+    z-index: 1
+
+/* ********************** Other 05 ********************** */
+
+.<%= get_class_name %>
+  .rs-other05.rs-show
+    .rs-front, .rs-back
+      -webkit-animation-duration: 0.8s
+      -webkit-animation-timing-function: ease-in-out
+      -webkit-animation-fill-mode: forwards
+      -webkit-transform-origin: 0% 100%
+      animation-duration: 0.8s
+      animation-timing-function: ease-in-out
+      animation-fill-mode: forwards
+      transform-origin: 0% 100%
+    .rs-front
+      -webkit-animation-name: rs-other5Front
+      animation-name: rs-other5Front
+    .rs-back
+      -webkit-animation-name: rs-other5Back
+      animation-name: rs-other5Back
+
+@-webkit-keyframes rs-other5Front
+  0%
+    z-index: 3
+  50%
+    -webkit-transform: rotateZ(-75deg)
+    z-index: 3
+  51%
+    z-index: 1
+  100%
+    -webkit-transform: rotateZ(0deg)
+    z-index: 1
+
+@-webkit-keyframes rs-other5Back
+  0%
+    z-index: 1
+  50%
+    -webkit-transform: rotateZ(20deg)
+    z-index: 1
+  51%
+    z-index: 3
+  100%
+    -webkit-transform: rotateZ(0deg)
+    z-index: 3
+
+@keyframes rs-other5Front
+  0%
+    z-index: 3
+  50%
+    transform: rotateZ(-75deg)
+    z-index: 3
+  51%
+    z-index: 1
+  100%
+    transform: rotateZ(0deg)
+    z-index: 1
+
+@keyframes rs-other5Back
+  0%
+    z-index: 1
+  50%
+    transform: rotateZ(20deg)
+    z-index: 1
+  51%
+    z-index: 3
+  100%
+    transform: rotateZ(0deg)
+    z-index: 3
+
+/* ********************** Other 06 ********************** */
+
+.<%= get_class_name %>
+  .rs-other06.rs-show .rs-front
+    -webkit-animation: rs-other6Front 0.4s ease-in-out forwards
+    animation: rs-other6Front 0.4s ease-in-out forwards
+
+@-webkit-keyframes rs-other6Front
+  0%
+    opacity: 1
+  100%
+    -webkit-transform: rotateZ(3deg) scale(1.5)
+    opacity: 0
+
+@keyframes rs-other6Front
+  0%
+    opacity: 1
+  100%
+    transform: rotateZ(3deg) scale(1.5)
+    opacity: 0
+
+/* ********************** Other 07 ********************** */
+
+.<%= get_class_name %>
+  .rs-other07.rs-show .rs-front
+    -webkit-transform-origin: 0% 100%
+    -webkit-animation: rs-other7Front 1s ease-in-out forwards
+    transform-origin: 0% 100%
+    animation: rs-other7Front 1s ease-in-out forwards
+
+@-webkit-keyframes rs-other7Front
+  0%
+    z-index: 3
+    -webkit-animation-timing-function: ease-in
+  20%
+    -webkit-transform: rotateZ(180deg)
+    z-index: 3
+    -webkit-animation-timing-function: ease-out
+  21%
+    z-index: 1
+  40%
+    -webkit-transform: rotateZ(370deg)
+    z-index: 1
+  60%
+    -webkit-transform: rotateZ(356deg)
+    z-index: 1
+  80%
+    -webkit-transform: rotateZ(360deg)
+    z-index: 1
+  95%
+    -webkit-transform: rotateZ(359deg)
+    z-index: 1
+  100%
+    -webkit-transform: rotateZ(360deg)
+    z-index: 1
+
+@keyframes rs-other7Front
+  0%
+    z-index: 3
+    animation-timing-function: ease-in
+  20%
+    transform: rotateZ(180deg)
+    z-index: 3
+    animation-timing-function: ease-out
+  21%
+    z-index: 1
+  40%
+    transform: rotateZ(370deg)
+    z-index: 1
+  60%
+    transform: rotateZ(356deg)
+    z-index: 1
+  80%
+    transform: rotateZ(360deg)
+    z-index: 1
+  95%
+    transform: rotateZ(359deg)
+    z-index: 1
+  100%
+    transform: rotateZ(360deg)
+    z-index: 1