Skip to content

Commit

Permalink
DMD3470 Midterm Project
Browse files Browse the repository at this point in the history
  • Loading branch information
@dac18026
dac18026 committed Mar 6, 2021
1 parent 88fa0d7 commit 981b711
Show file tree
Hide file tree
Showing 14 changed files with 1,254 additions and 0 deletions.
Binary file added midterm/.DS_Store
View file
Binary file not shown.
Binary file added midterm/css/.DS_Store
View file
Binary file not shown.
911 changes: 911 additions & 0 deletions midterm/css/style.css
View file

Large diffs are not rendered by default.

Binary file added midterm/extra-files/.DS_Store
View file
Binary file not shown.
1 change: 1 addition & 0 deletions midterm/extra-files/landing-anim.json
View file

Large diffs are not rendered by default.

Binary file added midterm/icons/straight-right-arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added midterm/images/.DS_Store
View file
Binary file not shown.
Binary file added midterm/images/css-img1.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added midterm/images/css-img2.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added midterm/images/css-img3.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added midterm/images/html-img.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added midterm/images/js-img.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
338 changes: 338 additions & 0 deletions midterm/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,338 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>3D Transforms</title>
</head>
<body>
<header>
<div class="mobile-nav">
<a
href="#main-menu"
id="main-menu-toggle"
class="menu-toggle"
aria-label="Open main menu"
>
<span class="sr-only"
><img
id="burger"
src="https://img.icons8.com/material-rounded/48/ffffff/menu--v1.png"
alt="burger"
/></span>
<span class="fa fa-bars" aria-hidden="true"></span>
</a>

<nav id="main-menu" class="main-menu" aria-label="Main menu">
<a
href="#main-menu-toggle"
id="main-menu-close"
class="menu-close"
aria-label="Close main menu"
>
<span class="sr-only"
><img
src="https://img.icons8.com/fluent-systems-filled/48/ffffff/xbox-x.png"
alt="close tab"
/></span>
<span class="fa fa-close" aria-hidden="true"></span>
</a>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#basics">The Basics</a></li>
<li><a href="#card-flip-nav">Card Flip</a></li>
</ul>
</nav>
<a
href="#main-menu-toggle"
class="backdrop"
tabindex="-1"
aria-hidden="true"
hidden
></a>
</div>
<div class="big-nav">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#basics">The Basics</a></li>
<li><a href="#card-flip-nav">Card Flip</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="landing-animation" id="home">
<lottie-player
src="https://assets6.lottiefiles.com/private_files/lf30_fgmxey2p.json"
style="width: auto"
autoplay
loop
></lottie-player>
</section>
<div class="basic-blocks" id="basics">
<section class="top-desc-cube">
<div class="top-desc">
<h2>Basic 3D Transform Methods</h2>
<p>
CSS 3D transforms allow us to rotate, skew, squash, and stretch
HTML 5 elements. While this wouldn’t be the most efficient way to
3D model, it is an exciting way to add another level of
interactivity to your websites. Adding a third axis to a website
creates a sense of depth and allows us to move elements towards
and away from the user. The z-axis is measured in positive and
negative values.
</p>
<p></p>
</div>
<div class="cube-container">
<div class="cube">
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
<div class="face left">Left</div>
<div class="face right">Right</div>
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
</section>
<section class="basic-section-1">
<div class="card" id="card-1">
<div class="top-half">
<h3>Matrix 3D</h3>
</div>
<div class="inner-card">
<h4>
matrix3d( a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4,
b4, c4, d4 )
</h4>
<p>A transform method using a 4 x 4 matrix of 16 values.</p>
</div>
</div>

<div class="card" id="card-2">
<div class="top-half">
<h3>Translate 3D</h3>
<p>translate3d:(x,y,z);</p>
<p>Defines a 3D translation.</p>
</div>
<div class="inner-card">
<h4>translateX(x)</h4>
<p>
Defines a 3D translation, using only the value for the X-axis
</p>
<h4>translateY(y)</h4>
<p>
Defines a 3D translation, using only the value for the Y-axis
</p>
<h4>translateZ(z)</h4>
<p>
Defines a 3D translation, using only the value for the Z-axis
</p>
</div>
</div>

<div class="card" id="card-3">
<div class="top-half">
<h3>Scale 3D</h3>
<p>(x,y,z)</p>
<p>Defines a 3D scale transformation</p>
</div>
<div class="inner-card">
<h4>scaleX(x)</h4>
<p>
Defines a 3D scale transformation by giving a value for the
X-axis
</p>
<h4>scaleY(y)</h4>
<p>
Defines a 3D scale transformation by giving a value for the
Y-axis
</p>
<h4>scaleZ(z)</h4>
<p>
Defines a 3D scale transformation by giving a value for the
Z-axis
</p>
</div>
</div>
</section>
<section class="basic-section-2">
<div class="card" id="card-4">
<div class="top-half">
<h3>Rotate 3D</h3>
<p>rotate3d(x,y,z,angle)</p>
<p>Defines a 3D rotation</p>
</div>
<div class="inner-card">
<h4>rotateX(angle)</h4>
<p>Defines a 3D rotation along the X-axis</p>
<h4>rotateY(angle)</h4>
<p>Defines a 3D rotation along the Y-axis</p>
<h4>rotateZ(angle)</h4>
<p>Defines a 3D rotation along the Z-axis</p>
</div>
</div>

<div class="card" id="card-5">
<div class="top-half">
<h3>Skew</h3>
<p>skew(x-angle,y-angle)</p>
<p>
Defines a 2D skew transformation along the X- and the Y-axis
</p>
</div>
<div class="inner-card">
<h4>skewX(angle)</h4>
<p>Defines a 2D skew transformation along the X-axis</p>
<h4>skewY(angle)</h4>
<p>Defines a 2D skew transformation along the Y-axis</p>
</div>
</div>

<div class="card" id="card-6">
<div class="top-half">
<h3>Perspective</h3>
</div>
<div class="inner-card">
<h4>perspective(n)</h4>
<p>Defines a perspective view for a 3D transformed element</p>
<p>
If the value is 0 or a negative number, no perspective transform
is applied.
</p>
</div>
</div>
</section>
</div>
<hr />
<div class="demo-container" id="card-flip-nav">
<section>
<div class="demo-intro">
<h1>CSS Card Flip</h1>
<p class="transition-text">
Now that we've covered some ways to use CSS 3D transforms, let's
practice them and create a simple card flip using HTML, CSS, and
JavaScript. For this demonstration we will be using the rotateY()
and perspective property.
</p>
</div>
<div class="flip-ex">
<div class="flip-buddy">
<h1 id="arrow-text">Click Me</h1>
<img
src="icons/straight-right-arrow.png"
id="flip-arrow"
alt="arrow"
/>
</div>
<div class="scene">
<div class="s-card">
<div class="s-card-face s-card-front">
<p class="s-card-text">Front</p>
</div>
<div class="s-card-face s-card-back">
<p class="s-card-text">Back</p>
</div>
</div>
</div>
</div>
</section>
<section class="demo-section-container">
<div class="demo-title">
<h2>HTML</h2>
</div>
<div class="demo-section">
<p>
First, we are going to create a div with a class of container to
hold our card. Next, we will add another div with the class of
card. Inside of div class=”card” we must add two more divs which
will allow us to style the front and back of the card as well as
keep the positions of each side in line.
</p>
<img src="images/html-img.png" alt="HTML code" class="demo-imgs" />
</div>
</section>
<section class="demo-section-container">
<div class="demo-title">
<h2>CSS</h2>
</div>
<div class="demo-section">
<p>
Let’s start by setting up the container, first we will need to set
the width, height, and margin. It is important to add the
perspective property to create a 3D space for our transforms to
occur. The perspective of the container will only affect the
content inside of it.
</p>
<img src="images/css-img1.jpeg" alt="CSS code" class="demo-imgs" />
</div>
<div class="demo-section">
<p>
After the perspective has been set, we will place our card in 3D
space. By setting the width and height to 100% we have set the
card’s transform-origin to the center of the container. Next we
will set the position, and transition period of our card
animation. The transform-style: preserve-3d; property ensures that
the children of the card element are positioned in 3D space. Below
we will add the card class a second time and add the is-flipped.
Use the property transform: rotateY(180deg) to turn the card over
and expose the backside.
</p>
<img src="images/css-img2.jpeg" alt="CSS code" class="demo-imgs" />
</div>
<div class="demo-section">
<p>
Finally, we can start to style the faces of our card. To align the
faces in 3D space, use the card-face class and set the position to
absolute. Again set the width and height to 100% so each face
fills the card class. Be sure to add the backface-visibility
property to this class to hide the back of our card element. From
here you can use the classes front and back to further customize
the contents of each face.
</p>
<img src="images/css-img3.jpeg" alt="CSS code" class="demo-imgs" />
</div>
</section>
<section class="demo-section-container">
<div class="demo-title">
<h2>JavaScript</h2>
</div>
<div class="demo-section">
<p>
Finally, we can start to style the faces of our card. To align the
faces in 3D space, use the card-face class and set the position to
absolute. Again set the width and height to 100% so each face
fills the card class. Be sure to add the backface-visibility
property to this class to hide the back of our card element. From
here you can use the classes front and back to further customize
the contents of each face.
</p>
<img
src="images/js-img.png"
alt="JavaScript code"
class="demo-imgs"
/>
</div>
</section>
<div>
<button
class="live-demo"
onclick="window.open('https://github.uconn.edu/pages/dac18026/Dan-Collette-DMD-3470/card-flip/')"
>
<p>View Live Demo</p>
</button>
</div>
</div>
</main>
<footer>
<p>Created by Dan Collette</p>
<p>DMD3470 Spring 2021</p>
<p>Midterm Project</p>
</footer>
<script src="js/script.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions midterm/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
var card = document.querySelector('.s-card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});

0 comments on commit 981b711

Please sign in to comment.