The power of transform for centering

Developer
Chris Burnell
Size
3,747 Kb
Views
24,288
  1. The power of transform for centering Previews
  2. The power of transform for centering HTML Codes
  3. The power of transform for centering CSS Codes

How do I make an the power of transform for centering?

CSS3's transform is an invaluable tool because of the way certain percentage-based property values relate to the element or its parent.. What is a the power of transform for centering? How do you make a the power of transform for centering? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.

The power of transform for centering Previews
IQ Test

The power of transform for centering - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The power of transform for centering</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="modal"> <div class="line vertical-line"></div> <div class="line horizontal-line"></div>
</div>
<div class="instructions"> <div><span>Modal Magic — <a href="https://codepen.io/chrisburnell/details/CHEbf/" title=" " target="_top">Consult Pen Description for details</a></span></div> <div><span>Add <code>top: 50%;</code> and <code>left: 50%;</code> to our modal. This is relative to the parent element of the modal and the top left corner of our modal.</span></div> <div><span>Add <code>transform: translate3d(-50%, -50%, 0);</code>. These values, conveniently, are relative to the modal itself.</span></div> <div><span>Change the size of the modal to <code>10em</code> by <code>10em</code>.</span></div> <div><span>Change the size of the modal back to <code>5em</code> by <code>5em</code>.</span></div> <div><span>Change the size of the modal to <code>50%</code> by <code>50%</code>.</span></div> <div><span>Change the size of the modal to <code>80%</code> by <code>30%</code>.</span></div>
</div>
<div class="line vertical-line"></div>
<div class="line horizontal-line"></div>
</body>
</html>

The power of transform for centering - Script Codes CSS Codes

html,
body { height: 100%;
}
body { position: relative; overflow: hidden;
}
.modal { background-color: rgba(0, 128, 0, 0.8); width: 5em; height: 5em; position: absolute; top: 0; left: 0; -webkit-animation: demonstrate 20s linear infinite; animation: demonstrate 20s linear infinite; z-index: 2;
}
@-webkit-keyframes demonstrate { 0%, 10%, 100% { width: 5em; height: 5em; top: 0; left: 0; -webkit-transform: none; transform: none; } 20%, 30% { width: 5em; height: 5em; top: 50%; left: 50%; -webkit-transform: none; transform: none; } 40%, 50% { width: 5em; height: 5em; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 60% { width: 10em; height: 10em; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 70% { width: 5em; height: 5em; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 80% { width: 50%; height: 50%; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 90%, 99.999% { width: 80%; height: 30%; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
}
@keyframes demonstrate { 0%, 10%, 100% { width: 5em; height: 5em; top: 0; left: 0; -webkit-transform: none; transform: none; } 20%, 30% { width: 5em; height: 5em; top: 50%; left: 50%; -webkit-transform: none; transform: none; } 40%, 50% { width: 5em; height: 5em; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 60% { width: 10em; height: 10em; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 70% { width: 5em; height: 5em; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 80% { width: 50%; height: 50%; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 90%, 99.999% { width: 80%; height: 30%; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
}
.instructions { background-color: rgba(255, 255, 255, 0.9); width: 100%; height: 4em; position: absolute; bottom: 0; left: 0; overflow-y: hidden; line-height: 1.5em; text-align: center; z-index: 1;
}
.instructions div { height: 4em; display: block; position: relative;
}
.instructions span { display: block; width: 90%; padding: 0 5%; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.instructions div:first-child { -webkit-animation: instructions-queue 20s linear infinite; animation: instructions-queue 20s linear infinite;
}
@-webkit-keyframes instructions-queue { 0%, 9.999% { margin-top: 0; } 10%, 29.999% { margin-top: -4em; } 30%, 49.999% { margin-top: -8em; } 50%, 59.999% { margin-top: -12em; } 60%, 69.999% { margin-top: -16em; } 70%, 79.999% { margin-top: -20em; } 80%, 100% { margin-top: -24em; }
}
@keyframes instructions-queue { 0%, 9.999% { margin-top: 0; } 10%, 29.999% { margin-top: -4em; } 30%, 49.999% { margin-top: -8em; } 50%, 59.999% { margin-top: -12em; } 60%, 69.999% { margin-top: -16em; } 70%, 79.999% { margin-top: -20em; } 80%, 100% { margin-top: -24em; }
}
.line { background-color: red; position: absolute;
}
.modal .line { background-color: rgba(0, 0, 0, 0.25);
}
.vertical-line { width: 1px; height: 100%; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.horizontal-line { width: 100%; height: 1px; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
code { font-size: .9em; font-weight: bold;
}
The power of transform for centering - Script Codes
The power of transform for centering - Script Codes
Home Page Home
Developer Chris Burnell
Username chrisburnell
Uploaded September 16, 2022
Rating 3
Size 3,747 Kb
Views 24,288
Do you need developer help for The power of transform for centering?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Burnell (chrisburnell) Script Codes
Name
Stupid RTL Demo
Psychedelic Slice
Category Hover Demo
The Importance of Proper Navigational CSS
Globule Bleu Jobs Page Anchor Rollover Effect
Cutaway Indicator
Simple CSS Checkbox
Zoomy Anchor Thing
Infinite Square
Student Charter Demo for City University
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!