css3 中怎样实现div的2d，3d旋转？
那个页面有个展示效果，我想要实现那个的代码 展开
<p onclick="rotateDIV()" id="rotate1" class="animated_div" style="transform: rotate(360deg);">2D 旋转</p>
<p onclick="rotateYDIV()" id="rotatey1" class="animated_div" style="transform: rotateY(180deg);">3D 旋转</p>
<style>
p {
margin: 12px 0 0 0;
line-height: 150%;
}
#rotate1, #rotatey1 {
border: 1px solid #000000;
background: red;
margin: 10px;
opacity: 0.7;
}
.animated_div {
width: 60px;
height: 40px;
color: #ffffff;
position: relative;
font-weight: bold;
padding: 20px 10px 0px 10px;
float: left;
margin: 20px;
margin-right: 50px;
border: 1px solid #888888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
line-height: normal;
text-align: center;
vertical-align: middle;
}
#rotate1,#rotatey1 { border:1px solid #000000; background:red; margin:10px; opacity:0.7; }
</style>
<script><!--var x,y,n=0,ny=0,rotINT,rotYINTfunction rotateDIV(){x=document.getElementById("rotate1")clearInterval(rotINT)rotINT=setInterval("startRotate()",10)}function rotateYDIV(){y=document.getElementById("rotatey1")clearInterval(rotYINT)rotYINT=setInterval("startYRotate()",10)}function startRotate(){n=n+1x.style.transform="rotate(" + n + "deg)"x.style.webkitTransform="rotate(" + n + "deg)"x.style.OTransform="rotate(" + n + "deg)"x.style.MozTransform="rotate(" + n + "deg)"if (n==180 || n==360) { clearInterval(rotINT) if (n==360){n=0} }}function startYRotate(){ny=ny+1y.style.transform="rotateY(" + ny + "deg)"y.style.webkitTransform="rotateY(" + ny + "deg)"y.style.OTransform="rotateY(" + ny + "deg)"y.style.MozTransform="rotateY(" + ny + "deg)"if (ny==180 || ny>=360) { clearInterval(rotYINT) if (ny>=360){ny=0} }}//--></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
div {
background: #000;
color: #fff;
width: 100px;
height: 100px;
margin: 50px;
display: inline-block;
}
/*请用谷歌浏览器预览效果, 鼠标划过方块看效果*/
/*2D旋转*/
.one:hover {
-webkit-transition: all 0.5s ease-in-out;
-webkit-transform: rotate(360deg);
transition: all 0.8s ease-in-out;
}
/*3D旋转*/
.two:hover {
-webkit-transform:rotateY(360deg);
transition: all 0.8s ease-in-out;
}
/*放大*/
.three:hover {
-webkit-transform: scale(1.2);
transition: all 0.8s ease-in-out;
}
</style>
</head>
<body>
<div class="one">2D旋转</div>
<div class="two">3D旋转</div>
<div class="three">放大</div>
</body>
</html>
<style>
.div1, .div2{
width:80px;
height:40px;
text-align:center;
line-height:40px;
background-color:#f88;
border:1px solid #666;
margin:10px;
transition:all 2s;
}
.div1:hover{
transform:rotate(180deg);
}
.div2:hover{
transform:rotateY(180deg);
}
</style>
<div class=div1>2D旋转</div>
<div class=div2>3D旋转</div>
html:
<p onClick="rotateDIV()" id="rotate1" class="animated_div">2D 旋转</p>
<p onClick="rotateYDIV()" id="rotatey1" class="animated_div">3D 旋转</p>
JS:
var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotate1")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
y=document.getElementById("rotatey1")
clearInterval(rotYINT)
rotYINT=setInterval("startYRotate()",10)
}
function startRotate()
{
n=n+1
x.style.transform="rotate(" + n + "deg)"
x.style.webkitTransform="rotate(" + n + "deg)"
x.style.OTransform="rotate(" + n + "deg)"
x.style.MozTransform="rotate(" + n + "deg)"
if (n==180 || n==360)
{
clearInterval(rotINT)
if (n==360){n=0}
}
}
function startYRotate()
{
ny=ny+1
y.style.transform="rotateY(" + ny + "deg)"
y.style.webkitTransform="rotateY(" + ny + "deg)"
y.style.OTransform="rotateY(" + ny + "deg)"
y.style.MozTransform="rotateY(" + ny + "deg)"
if (ny==180 || ny>=360)
{
clearInterval(rotYINT)
if (ny>=360){ny=0}
}
}
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */-moz-transform: rotateY(130deg); /* Firefox */}
