-1

I'm a total beginner who has no clue what is he doing and trying to create a custom cursor effect for our website at my job with CSS and JavaScript. Everything works fine except I can't create a triangular shape. I've read articles about using borders but decided to try a different way, but it's not working. The code is attached below. Can anyone tell me what am I doing wrong?

body {             
 width: 30%;
 padding-bottom: 21.27%; /* = width / 1.41 */
 position: relative;
 overflow: hidden;
     
}                 

#myCustomCursor {             
position: fixed; 
width: 100%;             
height: 100%;             
background: #CC2FFA; 
top: var(--y, 0);             
left: var(--x, 0);             
transform-origin: 0 100%;
transform: rotate(45deg);  
transform: skew(20%);
transform: translate(-50%, -50%);           
mix-blend-mode: difference;             
pointer-events: none;             
z-index: 99999;       
}                  

#myCustomCursor.myCursorHoverState {             
  width: 160px;
  height: 160px;
  background: blue;
}
MfyDev
  • 439
  • 1
  • 12
Jason White
  • 1
  • 1

2 Answers2

0

It is because you're using both, transform: rotate(45deg); transform: translate(-50%, -50%); . In your case the later one(transform: translate(-50%, -50%);) overwrites the rotate transformation(transform: rotate(45deg);). You can fix this by adding both values to a single line and separating it with a space. i.e: transform: translate(-50%, -50%) rotate(45deg) ;

You can read more about this from the following answer.

Rotate and translate

LNTR
  • 1
  • 2
  • thanks for responding. While your advice helped me with the rotation, it still wasn't working. I figured it out though, Thanks again. – Jason White Sep 02 '23 at 20:27
0

So, i learned a solution to my issue and therefore i'm going to answer my own question. Just in case it helps someone down the road. The code is attached below. Using borders was the way to go.

body {             
//cursor: none;
min-height: 100%;
background: rgb(255, 255, 255);        
}                 

#myCustomCursor {             
position: fixed;             
//circle
//width: 30px;             
//height: 30px;             
//background: #cc2faa;             
//border-radius: 50%;             
//triangle
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #cc2faa;
top: var(--y, 0);             
left: var(--x, 0);             
transform: translate(-50%, -50%);             
mix-blend-mode: difference;             
pointer-events: none;             
//transition-duration: 300ms;
//transition-timing-function: ease-out;             
z-index: 99999;       
}
Jason White
  • 1
  • 1