Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Semantic-UI | Shape

  • Last Updated : 21 Jun, 2020

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It has different elements that can be used to make websites look more amazing. One of the modules in Semantic UI is the shape module. A shape is a three-dimensional object displayed in a two-dimensional plane. It can include content on all of its sides.

Note: This module makes use of 3D transformations which are currently supported only in modern browsers.

Syntax:

$('.shape').shape();
$('.up').click(function() {
   $('.shape').shape('flip up');
})
$('.right').click(function() {
   $('.shape').shape('flip right');
})

Example: The below example shows how jQuery can be used to ‘flip back’ or ‘flip left’ the cube and rotate it accordingly.

html




<html>
<head>
  <title>
    Semantic UI
  </title>
  
  <!-- Include the Semantic UI CSS -->
  <link href=
    rel="stylesheet" />
</head>
  
<body>
  <div style="margin-top: 100px" 
       class="ui container">
    <h2>Shape</h2>
  
    <!-- Define the shape -->
    <div class="ui cube shape">
  
      <!-- Define the contents of the sides -->
      <div class="sides">
        <div class="side">
          <div class="content">
            <div class="center">
              This is side 1
            </div>
          </div>
        </div>
        <div class="side">
          <div class="content">
            <div class="center">
              This is side 2
            </div>
          </div>
        </div>
        <div class="side active">
          <div class="content">
            <div class="center">
              This is side 3
            </div>
          </div>
        </div>
        <div class="side">
          <div class="content">
            <div class="center">
              This is side 4
            </div>
          </div>
        </div>
        <div class="side">
          <div class="content">
            <div class="center">
              This is side 5
            </div>
          </div>
        </div>
        <div class="side">
          <div class="content">
            <div class="center">
              This is side 6
            </div>
          </div>
        </div>
      </div>
    </div>
    <br>
    <br>
  
    <!-- Define buttons for flipping the shape -->
    <button class="ui button up">
      Flip-Up
    </button>
    <button class="ui button right">
      Flip-Right
    </button>
  </div>
  
  <!-- Include jQuery -->
  </script>
  
  <!-- Include Semantic UI -->
  </script>
  <script>
  
    // Initialize the shape
    $('.shape').shape();
  
    $('.up').click(function () {
  
      // Make the shape flip up
      $('.shape').shape('flip up');
    })
  
    $('.right').click(function () {
  
      // Make the shape flip to the right
      $('.shape').shape('flip right');
    })
  </script>
</body>
</html>

Output:
 



Example: The below example shows a text shape which allows text to be shown on the sides of the shape.

html




<html>
<head>
  <title>
    Semantic UI
  </title>
  
  <!-- Include the Semantic UI CSS -->
        rel="stylesheet" />
</head>
<body>
  <div style="margin-top: 100px"
       class="ui container">
    <h2>Shape</h2>
  
    <!-- Define the shape -->
    <div class="ui text shape">
  
      <!-- Define the contents of the sides -->
      <div class="sides">
        <div class="active ui header side">
          Welcome to geeksforgeeks
        </div>
        <div class="ui header side">
          A computer science portal.
        </div>
        <div class="ui header side">
          You can information about
          anything related to computers.
        </div>
        <div class="ui header side">
          You can even contribute
          to help others and earn money.
        </div>
      </div>
    </div>
    <br>
    <br>
  
    <!-- Define buttons for 
    flipping the shape -->
    <button class="ui button up">
      Flip-Up
    </button>
    <button class="ui button right">
      Flip-Right
    </button>
  
  </div>
  <!-- Include jQuery -->
  </script>
  
  <!-- Include Semantic UI -->
  </script>
  <script>
  
    // Initialize the shape
    $('.shape').shape();
    $('.up').click(function () {
  
      // Make the shape flip up
      $('.shape').shape('flip up');
    })
    $('.right').click(function () {
  
      // Make the shape flip to the right
      $('.shape').shape('flip right');
    })
  </script>
</body>
</html>

Output:
 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!