Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Move element 20px right and 10px down */ .shifted { transform: translate(20px, 10px); } /* Hover lift effect */ .card { transition: transform 0.2s ease; } .card:hover { transform: translateY(-4px); } /* Perfect centring technique */ .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* without transform: position is top-left corner */ } /* Standalone translate property (modern syntax) */ .icon { translate: 0 -2px; /* same as transform: translateY(-2px) */ } /* Animated slide-in */ @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .drawer { animation: slideIn 0.3s ease-out; }
Result
Open