control direction of transition

Ronnico · September 2, 2013

Hello,

Below is an example from w3schools of a transition. In this example the transition expands to the right.

When you change width to height it goes downwards.

Is it possible to make the slide/movement to the left or upwards in pure css?

--------

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

transition:width 2s;

-webkit-transition:width 2s; /* Safari */

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>

-------

Recommended Posts