CSS Transform Playground
Build CSS transforms with live visual preview
transform: none;
Nasıl kullanılır
Adjust the sliders to translate, rotate, scale, skew, or apply 3D perspective to the preview element. Changes apply in real time. Use presets for common effects. Switch between the static CSS tab and the animation tab to generate keyframe code. Copy the generated CSS with one click.
Formül
Örnekler
Hover lift effect
Set scale to 1.05 and translateY to -4 to create a subtle lift on hover. Add a CSS transition for smooth motion. This is a common pattern for interactive cards and buttons.
3D card flip
Set perspective to 800, then rotateY to 180 for a card flip animation. Use the Keyframes tab to get a full @keyframes block you can apply on hover or click.
Diagonal badge rotation
Set rotate to -45 and translate to position a corner ribbon. Adjust transform-origin to top-left (0% 0%) so the rotation pivots from the correct corner.
Sıkça sorulan sorular
Does the order of CSS transforms matter?
Yes. Transforms apply right to left in the declaration. translate then rotate gives a different result than rotate then translate. This playground applies transforms in the most common order: perspective, translate, rotate, scale, skew.
What does transform-origin do?
Transform-origin sets the point around which transforms are applied. The default is center (50% 50%). Moving it to top-left (0% 0%) makes rotations pivot from the corner. It affects rotate, scale, and skew but not translate.
How does perspective work in CSS?
Perspective creates a 3D viewing distance. Lower values (200-500px) create dramatic 3D effects, higher values (800-2000px) are more subtle. It only affects 3D transforms like rotateX and rotateY. Set it to 0 to disable 3D.
Can I animate CSS transforms?
Transforms are one of the most performant CSS properties to animate. They run on the GPU compositor thread and do not trigger layout or paint. Use the Keyframes tab to generate animation code from your current transform state.
What is the difference between scale and zoom?
CSS scale() is a transform that visually resizes the element without changing layout. The element still occupies its original space. CSS zoom changes the effective size and triggers layout recalculation. scale() is GPU-accelerated and animatable; zoom is not.
Bu araç hakkında
Build CSS transforms visually. Adjust translate, rotate, scale, skew, and 3D perspective with live preview. Copy CSS and keyframe animations.
Tüm hesaplamalar tarayıcınızda yerel olarak gerçekleştirilir. Verileriniz cihazınızı hiçbir zaman terk etmez.