Open In App

Semantic-UI Shape Cube Type

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that offers us special classes to create stunning and responsive user interfaces. It makes use of jQuery and CSS to create pleasant user interfaces that are very much like bootstrap. It has many classes which are used for styling different elements in the HTML web page structure.

Semantic UI shape module is a three-dimensional object displayed in a two-dimensional plane. It can include content on all of its sides. Semantic-UI Shape Cube Type is used to create a cube containing some data/values on each side of the cube.

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

Semantic-UI Shape Cube Type Used Class:

  • cube: This class is used to create a cube shape with each face of data.

Syntax:

<div class="ui cube shape">
      <div class="sides">
          <div class="active side">
              ...
          </div>
          ...
      </div>
</div>

Example 1: In this example, we will describe the use of Semantic-UI Shape Cube Type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Shape Cube Type
    </title>
    <!-- Include the Semantic UI CSS -->
    <link href=
          rel="stylesheet" />
    <!-- Include jQuery -->
    <script src=
    </script>
    <!-- Include Semantic UI -->
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>Semantic-UI Shape Cube Type</h3>
  
        <div class="ui cube shape">
            <div class="sides">
                <div class="side">
                    <div class="content">
                        <div class="center">
                            HTML
                        </div>
                    </div>
                </div>
                <div class="side">
                    <div class="content">
                        <div class="center">
                            CSS
                        </div>
                    </div>
                </div>
                <div class="side active">
                    <div class="content">
                        <div class="center">
                            JavaScript
                        </div>
                    </div>
                </div>
                <div class="side">
                    <div class="content">
                        <div class="center">
                            Bootstrap
                        </div>
                    </div>
                </div>
                <div class="side">
                    <div class="content">
                        <div class="center">
                            Angujar.js
                        </div>
                    </div>
                </div>
                <div class="side">
                    <div class="content">
                        <div class="center">
                            React.js
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br><br>
  
        <button class="ui button up">
            Flip-Up
        </button>
  
        <button class="ui button right">
            Flip-Right
        </button>
    </div>
    <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:

Semantic-UI Shape Cube Type

Semantic-UI Shape Cube Type

Example 2: In this example, we will describe the use of Semantic-UI Shape Cube Type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Shape Cube Type
    </title>
    <!-- Include the Semantic UI CSS -->
    <link href=
          rel="stylesheet" />
    <!-- Include jQuery -->
    <script src=
    </script>
  
    <!-- Include Semantic UI -->
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container center aligned">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>Semantic-UI Shape Cube Type</h3>
  
        <div class="ui cube shape">
            <div class="sides">
                <div class="side">
                    <div class="content">
                        <div class="center">
                            HTML
                        </div>
                    </div>
                </div>
                <div class="ui red side">
                    <div class="content">
                        <div class="center">
                            CSS
                        </div>
                    </div>
                </div>
                <div class="side active">
                    <div class="content">
                        <div class="center">
                            JavaScript
                        </div>
                    </div>
                </div>
                <div class="side">
                    <div class="content">
                        <div class="center">
                            Bootstrap
                        </div>
                    </div>
                </div>
                <div class="side">
                    <div class="content">
                        <div class="center">
                            Angujar.js
                        </div>
                    </div>
                </div>
                <div class="side">
                    <div class="content">
                        <div class="center">
                            React.js
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br><br>
  
        <button class="ui button down">
            Flip-Down
        </button>
  
        <button class="ui button left">
            Flip-Left
        </button>
    </div>
  
    <script>
        // Initialize the shape
        $('.shape').shape();
        $('.down').click(function () {
            // Make the shape flip up
            $('.shape').shape('flip down');
        })
        $('.left').click(function () {
            // Make the shape flip to the right
            $('.shape').shape('flip left');
        })
    </script>
</body>
  
</html>


Output:

Semantic-UI Shape Cube Type

Semantic-UI Shape Cube Type

Reference: https://semantic-ui.com/modules/shape.html#cube



Last Updated : 13 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads