 |
| Have at those nasty bugs! |
Today's session will be comparatively simple. I hesitate to even call it a programming bug, but it certainly has plenty to do with web development, and it is code, so let's get to it.
I was trying to render a very simple tepee logo in CSS, consisting of a V and a U, both upside down, with the V over the U, the V acting as a "roof" and the U acting as a "door". Sounds simple enough, eh? Well, if it were, we wouldn't be having this conversation.
What went wrong
This is how I started out...<!DOCTYPE html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon">V</div>
<div class="icon">U</div>
</body>
</html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon">V</div>
<div class="icon">U</div>
</body>
</html>
See this? A V and a U, crammed together in a corner.
Now I rotated both the V and the U. So they were upside down.
<!DOCTYPE html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon" style="transform: rotate(180deg)">V</div>
<div class="icon" style="transform: rotate(180deg)">U</div>
</body>
</html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon" style="transform: rotate(180deg)">V</div>
<div class="icon" style="transform: rotate(180deg)">U</div>
</body>
</html>
So far so good!
I translated the U...
<!DOCTYPE html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon" style="transform: rotate(180deg) ">V</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
</body>
</html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon" style="transform: rotate(180deg) ">V</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
</body>
</html>
And now for the V, right?
I scaled the V, like 4 times.
<!DOCTYPE html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon" style="transform: scale(4,4) rotate(180deg) ">V</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
</body>
</html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon" style="transform: scale(4,4) rotate(180deg) ">V</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
</body>
</html>
Still looking OK.
And then I translated it.
<!DOCTYPE html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon" style="transform: scale(4,4) rotate(180deg) translate(300px, 200px)">V</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
</body>
</html>
<html>
<head>
<title>Tepee</title>
<style>
.icon
{
font-family: verdana;
font-size: 80px;
color: black;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="icon" style="transform: scale(4,4) rotate(180deg) translate(300px, 200px)">V</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
</body>
</html>
And boom! It disappeared!
Why it went wrong
The trick here is that I translated after rotating and scaling the V, whereas for the U, I translated before.And why's that important?
Well, this is a mathematical thing. When I was learning Computer Graphics back in University, one of the things they taught us was that where multiple transformations are concerned, order is important. If you take scaling as multiplication (or division) and translation as addition (or subtraction), scaling before you translate will have a very different result compared to translating before scaling.
But that aside, for CSS, the transform property has a very specific sequence where multiple transformations are concerned.
How I fixed it
Simply, I got consistent and translated first, before the other transformations<div class="icon" style="transform: translate(300px, 200px) scale(4,4) rotate(180deg)">V</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
And now, there we had the tepee!
Well admittedly, it still needed some adjustment.
<div class="icon" style="transform: translate(300px, 220px) scale(4,4) rotate(180deg)">V</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
<div class="icon" style="transform: translate(300px, 300px) rotate(180deg)">U</div>
But yeah, you get the idea.
Moral of the story
Even something like the order of things can throw you right off. Not everything is equivalent.See U around!
T___T
T___T
No comments:
Post a Comment