Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Describe your issue in detail here.
I’m trying to make a cool button for the page that moves diagonally downwards, but right now it only goes to the right. Can someone help?

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="test">Heyo</h1>
</body>
</html>
/* file: styles.css */
#test{
text-align: center;
margin-top: 50px;
}
#test:hover{
color: blue;
animation-name: test-hover;
animation-duration: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing: ease-in-out;
}

@keyframes test-hover{
0%{
  transform: translateY(0em);
  transform: translateX(0em);
}
100%{
  transform: translateY(0.3em);
  transform: translateX(0.3em);
}
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36 OPR/90.0.4480.54

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

you have a few bugs in the code.
Here’s the version without the bugs

That solved it, but could you explain how going from translateX() and translateY() to translate(x, y) makes it work? And did you do anything else to the code?

the problem wasn’t the translateX or translateY, it was the duplicate transform
As this was cascading stylesheets code, the last transform was the one that counted.

(yes i fixed one other thing as I recall. You can simply put your original code in a codepen and run the CSS analysis on it and it will find the same issue[s])

1 Like