Semantic-UI Reveal Rotate Type

Last Updated : 14 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic-UI provides us with a very easy way to present a better user interface when compared to traditional CSS. One of the features Semantic-UI offers is the Reveal where additional content is displayed instead of the previous content when the element is activated. We have different types of reveal in semantic UI which include fade, move and rotate. In this article, we are going to learn about Semantic-UI Reveal Rotate Type along with its implementation with the help of an example code.

In Semantic-UI Reveal Rotate Type, the element can be rotated to display additional content in place of the previous content. The elements can be rotated either to the left or right to display the additional content.

Semantic-UI Reveal Rotate Type Class:

rotate: This class is used to make the element rotatable.

Syntax:

<div class="ui rotate reveal image">
    <div class="visible content">
        // Content that is visible
    </div>
    <div class="hidden content">
        // Content that is hidden
    </div>
</div>

Example 1: This example shows the right rotation in Reveal.

HTML

<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div class="ui container"> 
            <h2 class="ui header green">Geeksforgeeks</h2> 
            <strong>Semantic-UI Reveal Rotate Type</strong> 
            <br><br> 
            <div class="ui small rotate left reveal image"> 
  
                <!-- Content that would be visible -->
                <div class="visible content"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png"> 
                </div> 
  
                <!-- Content that would be hidden -->
                <div class="hidden content"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output: We can notice that the previous content rotates right to display the additional content.

Right rotation to display additional content

Example 2: This example shows the left rotation in Reveal.

HTML

<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
  
<body> 
    <center> 
        <div class="ui container"> 
            <h2 class="ui header green">Geeksforgeeks</h2> 
            <strong>Semantic-UI Reveal Rotate Type</strong> 
            <br><br> 
            <div class="ui small rotate left reveal image"> 
                <img class="visible content" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png"> 
                <img class="hidden content" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>