Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

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:

2

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

3

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?

4

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
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.