Possible to transform: scale ONLY width from center?

HTML & CSS
1

hi,

Is there possible to scale the width of an element from the center with CSS?

Like if I have a box that is 300px height and 100px width, and on hover I want the width to increase to 300px from the center. Possible?

2

Hi,

Do you mean something like either of these examples.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.test1, .test2 {
	height: 300px;
	width: 100px;
	background: blue;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	margin:100px;
}
.test1:hover {
	width:300px;
	margin:100px 100px 100px 0;
}
.test2:hover {
	-webkit-transform:scaleX(3);
	-moz-transform:scaleX(3);
	-ms-transform:scaleX(3);
	transform:scaleX(3);
}
</style>
</head>

<body>
<div class="test1"></div>
<div class="test2"></div>
</body>
</html>
3

Thanks dude, scaleX was exactly what I was looking for=)