Home > Article > Web Front-end > css3 rotate image

css3 rotate image

高洛峰Original: 2017-02-17 13:08:271422browse

Code block

html page:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>rotate image</title>
</head>
<body>
	<div class="polaroid rotate_left">
		<img src="pulpitrock.jpg" alt="" width="284" height="213">
		<p class="caption">The pulpit rock inLysefjorden,Norway.</p>
	</div>

	<div class="polaroid rotate_right">
		<img src="cinqueterre.jpg" alt="" width="284" height="213">
		<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
	</div>
</body>
</html>

css样式:
	<style type="text/css" media="screen">
		body{
			margin:30px;
			background-color: #E9E9E9;
		}	

		div.polaroid{
			width: 294px;
			padding: 10px 10px 20px 10px;
			border:1px solid #BFBFBF;
			background-color: #F0F8FF;
			box-shadow: 4px 4px 6px #aaa;
			border-radius: 5px;
		}

		div.rotate_left{
			float: left;
			-ms-transform:rotate(7deg);
			-webkit-transform:rotate(7deg);
			transform:rotate(7deg);
		}

		div.rotate_right{
			float: left;
			-ms-transform:rotate(-10deg);
			-webkit-transform:rotate(-10deg);
			transform:rotate(-10deg);
		}
	</style>

For more css3 rotate image related articles, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS-cursor propertyNext article：CSS-cursor property

See more

css3 rotate image

Related articles