zz-james/transform_.idea_.name

## transform_.idea_.name
h

## transform_.idea_encodings.xml
h

## transform_.idea_misc.xml
h

## transform_.idea_modules.xml
h

## transform_.idea_scopes_scope_settings.xml
h

## transform_.idea_transform.iml
h

## transform_.idea_vcs.xml
h

## transform_index.html
<!DOCTYPE html>
<html>
<head>
    <title>transform</title>
    <style>

        #t1 {width:100px;  /*line length*/ height:1px;     /*line thickness*/}
        #t2 {width:1px;  /*line thickness*/ height:100px;   /*line length*/  }
    </style>
</head>
<body>
    <div id='t1' class='transform'></div>
    <div id='t2' class='transform'></div>
</body>
</html>

## transform_transform.css
.transform{

    background:#000;
    transform-origin: 0 0;
    transform: matrix(1,0,  0,1,  100,100);
}
/* matrix (a, b, d, e, c, f); */
/*
    [ x ]  =  ax + by + c    [ a, b, c ] [a, b, d]
    [ y ]  =  dx + ey + f    [ d, e, f ] [e, c, f]
    [ 1 ]                    [ 0, 0, 1 ]
*/
	<!DOCTYPE html>
	<html>
	<head>
	<title>transform</title>
	<style>

	#t1 {width:100px; /line length/ height:1px; /line thickness/}
	#t2 {width:1px; /line thickness/ height:100px; /line length/ }
	</style>
	</head>
	<body>
	<div id='t1' class='transform'></div>
	<div id='t2' class='transform'></div>
	</body>
	</html>
	.transform{

	background:#000;
	transform-origin: 0 0;
	transform: matrix(1,0, 0,1, 100,100);
	}
	/* matrix (a, b, d, e, c, f); */
	/*
	[ x ] = ax + by + c [ a, b, c ] [a, b, d]
	[ y ] = dx + ey + f [ d, e, f ] [e, c, f]
	[ 1 ] [ 0, 0, 1 ]
	*/