anonymoussc/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##CSS3 transform rotate

  
## index.html
<!DOCTYPE html>
<html>

<head>
    <title>CSS3 transform rotate</title>
    <link href="style.css" rel="stylesheet"/>
</head>

<body>
    <h2>rotate(90deg)</h2>

    <div class="transformOne">
        <h2>.transformOne</h2>
    </div>

    <h2>rotate(90deg)</h2>

    <div class="transformTwo">
        <h2>.transformTwo</h2>
    </div>

    <h2>transform: rotate(0deg) -> transform: rotate(90deg) -> transform: rotate(360deg)</h2>

    <div class="transformThree">
        <h2>.transformThree</h2>
    </div>

</body>

</html>

## style.css
.transformOne {
    display : block;
    width   : 50px;
    height  : 50px;
    border  : 1px solid black;
}

.transformOne:hover {
    -webkit-transform : rotate(90deg);
    transform         : rotate(90deg);
}

.transformTwo {
    display            : block;
    width              : 50px;
    height             : 50px;
    border             : 1px solid black;
    -webkit-transition : -webkit-transform ease-in 1s;
    transition         : transform ease-in 1s;
}

.transformTwo:hover {
    -webkit-transform : rotate(90deg);
    transform         : rotate(90deg);
}

@-webkit-keyframes animation-transform {
    from {
        -webkit-transform : rotate(0deg);
        transform         : rotate(0deg);
    }

    50% {
        -webkit-transform : rotate(90deg);
        transform         : rotate(90deg);
    }

    to {
        -webkit-transform : rotate(360deg);
        transform         : rotate(360deg);
    }
}

@keyframes animation-transform {
    from {
        transform : rotate(0deg);
    }

    50% {
        transform : rotate(90deg);
    }

    to {
        transform : rotate(360deg);
    }
}

.transformThree {
    display                    : block;
    width                      : 100px;
    height                     : 50px;
    border                     : 1px solid red;
    -webkit-animation-name     : animation-transform;
    animation-name             : animation-transform;
    -webkit-animation-duration : 5s;
    animation-duration         : 5s;
}
	<!DOCTYPE html>
	<html>

	<head>
	<title>CSS3 transform rotate</title>
	<link href="style.css" rel="stylesheet"/>
	</head>

	<body>
	<h2>rotate(90deg)</h2>

	<div class="transformOne">
	<h2>.transformOne</h2>
	</div>

	<h2>rotate(90deg)</h2>

	<div class="transformTwo">
	<h2>.transformTwo</h2>
	</div>

	<h2>transform: rotate(0deg) -> transform: rotate(90deg) -> transform: rotate(360deg)</h2>

	<div class="transformThree">
	<h2>.transformThree</h2>
	</div>

	</body>

	</html>
	.transformOne {
	display : block;
	width : 50px;
	height : 50px;
	border : 1px solid black;
	}

	.transformOne:hover {
	-webkit-transform : rotate(90deg);
	transform : rotate(90deg);
	}

	.transformTwo {
	display : block;
	width : 50px;
	height : 50px;
	border : 1px solid black;
	-webkit-transition : -webkit-transform ease-in 1s;
	transition : transform ease-in 1s;
	}

	.transformTwo:hover {
	-webkit-transform : rotate(90deg);
	transform : rotate(90deg);
	}

	@-webkit-keyframes animation-transform {
	from {
	-webkit-transform : rotate(0deg);
	transform : rotate(0deg);
	}

	50% {
	-webkit-transform : rotate(90deg);
	transform : rotate(90deg);
	}

	to {
	-webkit-transform : rotate(360deg);
	transform : rotate(360deg);
	}
	}

	@keyframes animation-transform {
	from {
	transform : rotate(0deg);
	}

	50% {
	transform : rotate(90deg);
	}

	to {
	transform : rotate(360deg);
	}
	}

	.transformThree {
	display : block;
	width : 100px;
	height : 50px;
	border : 1px solid red;
	-webkit-animation-name : animation-transform;
	animation-name : animation-transform;
	-webkit-animation-duration : 5s;
	animation-duration : 5s;
	}