検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >css3 画像を回転

css3 画像を回転

高洛峰
高洛峰オリジナル
2017-02-17 13:08:271479ブラウズ

コードブロック

html ページ:

<!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>

css3 画像回転関連の記事については、PHP 中国語 Web サイトに注目してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS カーソル プロパティ次の記事：CSS カーソル プロパティ

関連記事

続きを見る