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>
<link href=
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Shape</h2>
<div class="ui cube shape">
<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>
<button class="ui button up">
Flip-Up
</button>
<button class="ui button right">
Flip-Right
</button>
</div>
</script>
</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>
rel="stylesheet" />
</head>
<body>
<div style="margin-top: 100px"
class="ui container">
<h2>Shape</h2>
<div class="ui text shape">
<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>
<button class="ui button up">
Flip-Up
</button>
<button class="ui button right">
Flip-Right
</button>
</div>
</script>
</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:
