css3rotateimage

技術小牛人發表於2017-11-22

程式碼塊

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>

本文轉自  素顏豬  51CTO部落格,原文連結:http://blog.51cto.com/suyanzhu/1883415