013.xhtml - mozsearch

Enable keyboard shortcuts

<?xml version="1.0" encoding="utf-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Feedback image and CSS transforms</title>

<style type="text/css">

body

  {background-color:silver;

  margin:0;}

div

  {background-color:white;}

div > div

  {display:block;

  width:100px;

  height:87px;

  transform-origin:bottom right;

  transform:skew(-30deg);

  -o-transform-origin:bottom right;

  -o-transform:skew(-30deg);

  background-color:green;}

</style>

</head>

<body>

<div>

  <div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/>

</div>

<p>Try to drag green rhomb above. Feedback overlay should not be rectangular.</p>

</body>

</html>