Skip to content

Commit

Permalink
Merge pull request #47 from TamHoChi3008/issue46
Browse files Browse the repository at this point in the history 
Shapes 2D/3D
  • Loading branch information
@keshavgbpecdelhi
keshavgbpecdelhi committed Nov 5, 2021
2 parents f3a7979 + d83feb1 commit 6668db5
Show file tree
Hide file tree
Showing 7 changed files with 383 additions and 0 deletions.
37 changes: 37 additions & 0 deletions SHAPES/cone.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.shape{
position:relative;
margin:50px;
}
#triangle-up {
width: 0;
height: 0;
position: relative;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid black;
margin-left: 50px;
}

#triangle-up::before {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 99.5px solid transparent;
border-right: 99.5px solid transparent;
border-bottom: 199px solid #968e8e;
top: 6px;
left: -99.5px;
}
.shape .bottom{
width: 199px;
height: 50px;
border: 3px solid;
background: #968e8e;
-moz-border-radius: 100px / 25px;
-webkit-border-radius: 100px / 25px;
border-radius: 100px / 25px;
position:absolute;
top: 175px;
left: 50.5px;
}
24 changes: 24 additions & 0 deletions SHAPES/cube.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
#shape {

position:relative; margin:0 auto; top:80px; width:200px; height:200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(10deg) rotateY(15deg);
-moz-transform: rotateX(10deg) rotateY(15deg);
transform: rotateX(10deg) rotateY(80deg);
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
transition: transform 2s;
}
#shape > div
{
position:absolute; width:125px; height:125px;border:2px solid black;
background-color:#968e8e; opacity:.5;
}
#shape .ft { -webkit-transform: translateZ(63px); -moz-transform: translateZ(63px); transform: translateZ(63px); }
#shape .rt { -webkit-transform: rotateY(90deg) translateZ(63px); -moz-transform: rotateY(90deg) translateZ(63px); transform: rotateY(90deg) translateZ(63px); }
#shape .bk { -webkit-transform: rotateY(180deg) translateZ(63px); -moz-transform: rotateY(180deg) translateZ(63px); transform: rotateY(180deg) translateZ(63px); }
#shape .lt { -webkit-transform: rotateY(270deg) translateZ(63px); -moz-transform: rotateY(270deg) translateZ(63px); transform: rotateY(270deg) translateZ(63px); }
#shape .tp { -webkit-transform: rotateX(90deg) translateZ(63px); -moz-transform: rotateX(90deg) translateZ(63px); transform: rotateX(90deg) translateZ(63px); }
#shape .bm { -webkit-transform: rotateX(270deg) rotateY(0deg) translateZ(63px); -moz-transform: rotateX(270deg) rotateY(0deg) translateZ(63px); transform: rotateX(270deg) rotateY(0deg) translateZ(63px); }
41 changes: 41 additions & 0 deletions SHAPES/cylinder.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.tank{
position:relative;
margin:50px;
}

.tank .middle{
width:120px;
height:180px;
border-left-width: 3px;
border-right-width: 3px;
border-top-width: 0px;
border-bottom-width: 0px;
border-style: solid;
position:absolute;
}

.tank .top{
width: 120px;
height: 50px;
border: 3px solid;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position:absolute;
top:-25px;
background: #968e8e;

}

.tank .bottom{
width: 120px;
height: 50px;
border: 3px solid;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position:absolute;
top:155px;
background: #968e8e;

}
31 changes: 31 additions & 0 deletions SHAPES/half-sphere.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@


.haft-circle{
position:relative;
margin:50px;
}
.bottom-circle {
top: 125px;
left: 100px;
height: 100px;
width: 205px;
border-top-width: 0px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
border-radius: 0 0 150px 150px;
position: absolute;
}
.top-circle{
top: 85px;
left: 100px;
width: 205px;
height: 70px;
border: 3px solid;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 180px / 60px;
background: #968e8e;
position: absolute;
}
91 changes: 91 additions & 0 deletions SHAPES/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="cone.css">
<link rel="stylesheet" type="text/css" href="cylinder.css">
<link rel="stylesheet" type="text/css" href="cube.css">
<link rel="stylesheet" type="text/css" href="sphere.css">
<link rel="stylesheet" type="text/css" href="half-sphere.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h2 style="text-align: center;">Shapes</h2>
<div class="row">
<div class="col-lg-3">
<div class="circle"></div>
</div>
<div class="col-lg-3">
<div class="square"></div>
</div>
<div class="col-lg-3">
<div class="rectangle"></div>
</div>
<div class="col-lg-3">
<div class="triangle-up"></div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-lg-3">
<div class="trapezoid"></div>
</div>
<div class="col-lg-3">
<div class="parallelogram"></div>
</div>
<div class="col-lg-3">
<div class="diamond"></div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="shape">
<div id="triangle-up"></div>
<div class="bottom"></div>
</div>
</div>
<div class="col-md-3">
<div class="tank">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
</div>
<div class="col-md-3">
<div id="shape">
<div class="ft"></div>
<div class="rt"></div>
<div class="bk"></div>
<div class="lt"></div>
<div class="tp"></div>
<div class="bm"></div>
</div>
</div>
<div class="col-md-3">
<div class='ball'>
<div class='layer moving'>
<div class='layer gridplane yline'></div>
</div>
<div class='layer clip'>
<div class='shade'>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="haft-circle">
<div class="top-circle"></div>
<div class="bottom-circle"></div>
</div>
</div>
</div>
</div>
</body>
</html>
77 changes: 77 additions & 0 deletions SHAPES/sphere.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@

.ball {
position: absolute;
top:0px;
left:0px;
width: 30vmin;
height: 30vmin;
margin: 1vmin;
transform-style: preserve-3d;
transform: rotateX(-5deg);

}

@keyframes rot{
0% { transform: rotateY(160deg); }
100% { transform: rotateY(160deg); }
}

.layer {
position: absolute;
top: 0px;
left: 0px;
width: 30vmin;
height: 30vmin;
}

.moving
{
transform-style: preserve-3d;
transform-origin: 15vmin 15vmin;
animation: rot 10s linear infinite;
}

.gridplane {
width: 30vmin;
height: 30vmin;
border-radius: 50%;
border: 0.5vmin dashed rgb(128, 128, 128);
}

.xline { transform: translateY(1%) rotateX(90deg); }
.xline2 { transform: translateY(-1%) rotateX(90deg); }
.yline { transform: rotateY(90deg); }
.zline { transform: rotateZ(90deg); }

.clip
{
border-radius: 50%;
overflow:hidden;
transform: translateZ(-0vmin);
}

@keyframes highlightanim {
0.00% {left: -150.00%; top: -178.00% }
12.50% {left: -117.67%; top: -179.64% }
25.00% {left: -97.69%; top: -195.87% }
28.75% {left: -95.00%; top: -207.09% }
32.50% {left: -97.69%; top: -220.70% }
40.00% {left: -117.67%; top: -240.01% }
47.50% {left: -150.00%; top: -247.50% }
55.00% {left: -182.33%; top: -240.01% }
62.50% {left: -202.31%; top: -220.70% }
68.75% {left: -205.00%; top: -207.09% }
75.00% {left: -202.31%; top: -195.87% }
87.50% {left: -182.33%; top: -179.64% }
100.00% {left: -150.00%; top: -178.00% }
}

.shade
{
position: relative;
top: -150%;
left: -150%;
width: 400%;
height: 400%;
background: #968e8e;
}
82 changes: 82 additions & 0 deletions SHAPES/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@

.circle {
width: 200px;
height: 200px;
background: #968e8e;
border-radius: 50%;
border-style: solid;
border-color: black;
margin-left: 50px;
}
.square {
width: 200px;
height: 200px;
background: #968e8e;
border-style: solid;
border-color: black;
}
.rectangle {
width: 300px;
height: 200px;
background: #968e8e;
border-style: solid;
border-color: black;
}
.triangle-up {
width: 0;
height: 0;
position: relative;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid black;
margin-left: 50px;
}

.triangle-up::before {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 95px solid transparent;
border-right: 95px solid transparent;
border-bottom: 190px solid #968e8e;
top: 7px;
left: -95px;
}
.trapezoid {
border-bottom: 100px solid #968e8e;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 10px;
width: 200px;
margin-left: 50px;
}

.parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background: #968e8e;
margin-left: 50px;
margin-right: 100px;
}
.diamond {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #968e8e;
position: relative;
top: -100px;


}
.diamond:after {
content: '';
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #968e8e;
}

0 comments on commit 6668db5

Please sign in to comment.