지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS3 이미지 회전

CSS3 이미지 회전

高洛峰
풀어 주다： 2017-02-17 13:08:27
원래의
1497명이 탐색했습니다.

코드 블록

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 중국어 웹사이트를 주목하세요!

관련 라벨：
css3
원천：php.cn
이전 기사：CSS 커서 속성 다음 기사：CSS3의 미디어 미디어 쿼리
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿