HTML CSS examples for CSS Animation:Transform
Background changes while using transform()
<html> <head> <title>Lore</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w. j a va2s. c om--> background:Chartreuse; } .blocks { display:flex; position:relative; width:151px; height:56px; margin:26px; justify-content:center; align-items:center; color:yellow; font-family:'Helvetica', sans-serif; font-size:21px; border:8px solid blue; } .blocks#block1 { background:pink; left:501px; top:201px; } .blocks#block2 { left:501px; top:-51px; background:OrangeRed; } .blocks#block3 { left:201px; top:-46px; background:grey; } .blocks:after { position:absolute; content:''; top:-8px; left:-8px; right:-8px; bottom:-8px; z-index:-2; } .blocks#block1:after { box-shadow:4.6px 6.6px 2px -2px BlueViolet; } .blocks#block2:after { box-shadow:4.6px 6.6px 2px -2px Chartreuse; } .blocks#block3:after { box-shadow:4.6px 6.6px 2px -2px yellow; } .blocks#block1:hover { transition:2s ease; transform:translate(-100px); } </style> </head> <body> <div class="blocks" id="block1"> Lorem ips </div> <div class="blocks" id="block2"> Lorem ips </div> <div class="blocks" id="block3"> Lorem ips </div> </body> </html>