Member Avatar for extemer

hi i want to move my image.i have selected a image of key and i want it to move like in x and y rotation e.g in the direction we open the key i have tryed it but not working...help please

  • 4 Contributors
  • 3 Replies
  • 79 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by WebStudio Pros

Dani AI

Generated

For : the "key turning" look comes from rotating around a specific hinge point and adding a little 3D perspective, not from a simple flat spin. and covered the quick 2D/static routes; those are fine for a single rotated image. For an interactive/animated turn, use a parent with CSS perspective, set the image's transform-origin to the key's hinge, then animate a 3D rotate (rotateY or rotateX) so the key appears to swing into the lock.

A minimal example (HTML + CSS + tiny JS) showing the structure and the pivot:

<div class="wrap">
  <img src="key.png" class="key" alt="key">
</div>

.wrap { perspective: 800px; width: 220px; }
.key {
  display: block;
  transform-origin: 18% 50%; /* adjust until hinge lines up */
  transform-style: preserve-3d;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.key.turn { transform: rotateY(-60deg); }

document.querySelector('.key').addEventListener('click', function(){
  this.classList.toggle('turn');
});

Troubleshooting and tips: adjust transform-origin with devtools to match the key's real hinge; use PNG or SVG with a transparent background so the pivot is clean (SVG lets the pivot be precise via viewBox/transform); avoid animating top/left for performance and add will-change: transform. For reference on the transform functions and options, see the MDN transform docs. ' viewer idea is a reasonable fallback for non-animated needs.

Recommended Answers

All 3 Replies

Member Avatar for krabz01

this works only for CSS3

/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Member Avatar for florinfratica

You can rotate that image using Photoshop and save as your rotated image.

Open image with Photoshop -> Image -> Image Rotation

And select what option do you want.

Member Avatar for WebStudio Pros

You can also use an image viewer, embed it to your site so you will be able to rotate images

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.