The power of transform for centering - INTERACTIVE

Developer
Chris Burnell
Size
2,439 Kb
Views
26,299

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

See http://codepen.io/chrisburnell/details/CHEbf/ for full demo.. What is a the power of transform for centering - interactive? How do you make a the power of transform for centering - interactive? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.

The power of transform for centering - INTERACTIVE Previews
IQ Test

The power of transform for centering - INTERACTIVE - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The power of transform for centering - INTERACTIVE</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> <textarea class="modal" disabled></textarea>
<div class="instructions">Drag the bottom right corner of the box to resize!</div>
<div class="line vertical-line"></div>
<div class="line horizontal-line"></div>
</body>
</html>

The power of transform for centering - INTERACTIVE - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
html,
body { height: 100%;
}
body { position: relative; overflow: hidden;
}
.modal { background-color: rgba(255, 127, 80, 0.8); width: 5em; min-width: 5em; max-width: 100%; height: 5em; min-height: 5em; max-height: 100%; border: 0; outline: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: 3;
}
.instructions { background-color: white; padding: .5em 0; position: absolute; top: 1em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2;
}
.line { background-color: mediumseagreen; position: absolute; z-index: 1;
}
.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%);
}
The power of transform for centering - INTERACTIVE - Script Codes
The power of transform for centering - INTERACTIVE - Script Codes
Home Page Home
Developer Chris Burnell
Username chrisburnell
Uploaded September 16, 2022
Rating 3
Size 2,439 Kb
Views 26,299
Do you need developer help for The power of transform for centering - INTERACTIVE?

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
Message Types
Simple CSS Checkbox
Flyknife Comics
Clock Face Idea
Globule Bleu Jobs Page Anchor Rollover Effect
Persistent Light Source Transform
Psychedelic Slice
Student Charter Demo for City University
Modal Container without JS
Create amazing video scripts 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!