css实现div旋转任意角度

主要利用了css属性,transform,

transform w3c的属性详解:http://www.w3school.com.cn/cssref/pr_transform.asp

<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>DIV旋转属性的演示title> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 
<style type="text/css"> 
body { 
font-family: "Arial", sans-serif; 
} 
#example { 
position: absolute; 
border: #09F solid 1px; 
font-weight: 900; 
padding: 10px; 
display: block; 
width: 500px; 
height: 400px; 
margin-top: -1px; 
margin-left: -1px; 
transform: rotate(40deg); 
-o-transform: rotate(40deg); 
-webkit-transform: rotate(40deg); 
-moz-transform: rotate(40deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1.2660444431189777, M12=-0.3327876096865394, M21=0.1127876096865398, M22=0.9660444431189779); 
} 
style> 
 
head> 
<body> 
<div id="example"> 旋转成功div> 
body> 
html> 

你可能感兴趣的:(前端技术,css)