Enhanced Bootstrap Turn

Built in Turn PRO

Rotate an element by any angle to custom value or rotate it back from custom value to default position

Overview

Rotate the element to custom value (0deg → {value}) using turn[{value}],
or rotate it back from custom value to the default 0deg position ({value} → 0deg) using turn-from[{value}]. There are 3 predefined CSS properties: 45deg, 90deg and 180deg that are not processed by JavaScript.

Examples

Hover me

H E L L O !

CSS mask effect example
<div data-fx-trigger="hover">
  <h1 class="font-weight-bold mb-0 text-white" data-fx-group="hover/T:turn-from[45deg] hover/T:fade--in quad delay[(+50ms)]">
    <span>H</span>
    <span>E</span>
    <span>L</span>
    <span>L</span>
    <span>O</span>
    <span>!</span>
  </h1>
</div>

Turn

Triggers

To rotate an element when {trigger} is performed on a single element, use data-fx="{trigger}:turn[{value}deg] where {trigger} is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets hover state

And {value} is any integer with deg unit. The 45deg, 90deg and 180deg values are predefined in CSS, so they are immediately available on page load, thus not processed by JavaScript.

Hover over the elements:

Turn[45deg]
Turn[90deg]
Turn[180deg]
Turn[360deg]
Turn[5deg]
      













<div data-fx="hover:turn[45deg]">Turn[45deg]</div>
<div data-fx="hover:turn[90deg]">Turn[90deg]</div>
<div data-fx="hover:turn[180deg]">Turn[180deg]</div>
<div data-fx="hover:turn[360deg]">Turn[360deg]</div>
<div data-fx="hover:turn[5deg]">Turn[5deg]</div>
      

Click the elements to toggle .active class

Turn[45deg]
Turn[90deg]
Turn[180deg]
Turn[360deg]
Turn[5deg]
      













<div data-fx="active:turn[45deg]">Turn[45deg]</div>
<div data-fx="active:turn[90deg]">Turn[90deg]</div>
<div data-fx="active:turn[180deg]">Turn[180deg]</div>
<div data-fx="active:turn[360deg]">Turn[360deg]</div>
<div data-fx="active:turn[5deg]">Turn[5deg]</div>
      

Scroll into view to toggle .inview class

Turn[45deg]
Turn[90deg]
Turn[180deg]
Turn[360deg]
Turn[5deg]
      













<div data-fx="inview:turn[45deg]">Turn[45deg]</div>
<div data-fx="inview:turn[90deg]">Turn[90deg]</div>
<div data-fx="inview:turn[180deg]">Turn[180deg]</div>
<div data-fx="inview:turn[360deg]">Turn[360deg]</div>
<div data-fx="inview:turn[5deg]">Turn[5deg]</div>
      

Parent triggers

To rotate an element of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:turn[{value}deg] attribute to child elements where {TRIGGER} is:

  • inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
  • active/T: - when .active class is applied on parent Trigger element
  • show/T: - when .show class is applied on parent Trigger element
  • hover/T: - when hover state is applied on parent Trigger element

And {value} is any integer with deg unit. The 45deg, 90deg and 180deg values are predefined in CSS, so they are immediately available on page load, thus not processed by JavaScript.

Hover over the wrapper:

Turn[45deg]
Turn[90deg]
Turn[180deg]
Turn[360deg]
Turn[5deg]
      













<div data-fx-trigger="hover">
  <div data-fx="hover/T:turn[45deg]">Turn[45deg]</div>
  <div data-fx="hover/T:turn[90deg]">Turn[90deg]</div>
  <div data-fx="hover/T:turn[180deg]">Turn[180deg]</div>
  <div data-fx="hover/T:turn[360deg]">Turn[360deg]</div>
  <div data-fx="hover/T:turn[5deg]">Turn[5deg]</div>
</div>
      
      

Click the wrapper to toggle .active class:

Turn[45deg]
Turn[90deg]
Turn[180deg]
Turn[360deg]
Turn[5deg]
      













<div data-fx-trigger="active">
  <div data-fx="active/T:turn[45deg]">Turn[45deg]</div>
  <div data-fx="active/T:turn[90deg]">Turn[90deg]</div>
  <div data-fx="active/T:turn[180deg]">Turn[180deg]</div>
  <div data-fx="active/T:turn[360deg]">Turn[360deg]</div>
  <div data-fx="active/T:turn[5deg]">Turn[5deg]</div>
</div>
      
      

Scroll into view to toggle .inview class on parent

Turn[45deg]
Turn[90deg]
Turn[180deg]
Turn[360deg]
Turn[5deg]
      













<div data-fx-trigger="inview">
  <div data-fx="inview/T:turn[45deg]">Turn[45deg]</div>
  <div data-fx="inview/T:turn[90deg]">Turn[90deg]</div>
  <div data-fx="inview/T:turn[180deg]">Turn[180deg]</div>
  <div data-fx="inview/T:turn[360deg]">Turn[360deg]</div>
  <div data-fx="inview/T:turn[5deg]">Turn[5deg]</div>
</div>
      
      

Turn from

Triggers

To rotate an element from current value back into 0deg rotation when {trigger} is performed on a single element, use data-fx="{trigger}:turn-from[{value}deg] where {trigger} is:

  • inview: - when element appears in the viewport and gets .inview class
  • active: - when element gets .active class
  • show: - when element gets .show class
  • hover: - when element gets hover state

And {value} is any integer with deg unit. The 45deg, 90deg and 180deg values are predefined in CSS, so they are immediately available on page load, thus not processed by JavaScript.

Hover over the elements:

Turn from[45deg]
Turn from[90deg]
Turn from[180deg]
Turn from[360deg]
Turn from[5deg]
      













<div data-fx="hover:turn-from[45deg]">Turn from[45deg]</div>
<div data-fx="hover:turn-from[90deg]">Turn from[90deg]</div>
<div data-fx="hover:turn-from[180deg]">Turn from[180deg]</div>
<div data-fx="hover:turn-from[360deg]">Turn from[360deg]</div>
<div data-fx="hover:turn-from[5deg]">Turn from[5deg]</div>
      

Click the elements to toggle .active class

Turn from[45deg]
Turn from[90deg]
Turn from[180deg]
Turn from[360deg]
Turn from[5deg]
      













<div data-fx="active:turn-from[45deg]">Turn from[45deg]</div>
<div data-fx="active:turn-from[90deg]">Turn from[90deg]</div>
<div data-fx="active:turn-from[180deg]">Turn from[180deg]</div>
<div data-fx="active:turn-from[360deg]">Turn from[360deg]</div>
<div data-fx="active:turn-from[5deg]">Turn from[5deg]</div>
      

Scroll into view to toggle .inview class

Turn from[45deg]
Turn from[90deg]
Turn from[180deg]
Turn from[360deg]
Turn from[5deg]
      













<div data-fx="inview:turn-from[45deg]">Turn from[45deg]</div>
<div data-fx="inview:turn-from[90deg]">Turn from[90deg]</div>
<div data-fx="inview:turn-from[180deg]">Turn from[180deg]</div>
<div data-fx="inview:turn-from[360deg]">Turn from[360deg]</div>
<div data-fx="inview:turn-from[5deg]">Turn from[5deg]</div>
      

Parent triggers

To rotate an element from current value back into 0deg rotation of a single or multiple child elements when {trigger} is performed on a parent element,
add data-fx-trigger="{inview|active|show|hover} to indicate that this is a parent element with the desired trigger - if this parent trigger is performed,
child elements will change.

Than add data-fx="{TRIGGER}:turn-from[{value}deg] attribute to child elements where {TRIGGER} is:

  • inview/T: - when .inview class is applied on parent Trigger element, because it’s visible in the viewport
  • active/T: - when .active class is applied on parent Trigger element
  • show/T: - when .show class is applied on parent Trigger element
  • hover/T: - when hover state is applied on parent Trigger element

And {value} is any integer with deg unit. The 45deg, 90deg and 180deg values are predefined in CSS, so they are immediately available on page load, thus not processed by JavaScript.

Hover over the wrapper:

Turn from[45deg]
Turn from[90deg]
Turn from[180deg]
Turn from[360deg]
Turn from[5deg]
      













<div data-fx-trigger="hover">
  <div data-fx="hover/T:turn-from[45deg]">Turn from[45deg]</div>
  <div data-fx="hover/T:turn-from[90deg]">Turn from[90deg]</div>
  <div data-fx="hover/T:turn-from[180deg]">Turn from[180deg]</div>
  <div data-fx="hover/T:turn-from[360deg]">Turn from[360deg]</div>
  <div data-fx="hover/T:turn-from[5deg]">Turn from[5deg]</div>
</div>
      
      

Click the wrapper to toggle .active class:

Turn from[45deg]
Turn from[90deg]
Turn from[180deg]
Turn from[360deg]
Turn from[5deg]
      













<div data-fx-trigger="active">
  <div data-fx="active/T:turn-from[45deg]">Turn from[45deg]</div>
  <div data-fx="active/T:turn-from[90deg]">Turn from[90deg]</div>
  <div data-fx="active/T:turn-from[180deg]">Turn from[180deg]</div>
  <div data-fx="active/T:turn-from[360deg]">Turn from[360deg]</div>
  <div data-fx="active/T:turn-from[5deg]">Turn from[5deg]</div>
</div>
      
      

Scroll into view to toggle .inview class on parent

Turn from[45deg]
Turn from[90deg]
Turn from[180deg]
Turn from[360deg]
Turn from[5deg]
      













<div data-fx-trigger="inview">
  <div data-fx="inview/T:turn-from[45deg]">Turn from[45deg]</div>
  <div data-fx="inview/T:turn-from[90deg]">Turn from[90deg]</div>
  <div data-fx="inview/T:turn-from[180deg]">Turn from[180deg]</div>
  <div data-fx="inview/T:turn-from[360deg]">Turn from[360deg]</div>
  <div data-fx="inview/T:turn-from[5deg]">Turn from[5deg]</div>
</div>