css3 中怎样实现div的2d，3d旋转？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 中怎样实现div的2d，3d旋转？相关的知识，希望对你有一定的参考价值。
像w3c教室那样。网址是.w3school.com.cn/css3/css3_3dtransform.asp。 前边是www。
那个页面有个展示效果，我想要实现那个的代码
<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> 参考技术A <!DOCTYPE html>
<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>本回答被提问者采纳 参考技术B <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> 参考技术C
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 */
以上是关于css3 中怎样实现div的2d，3d旋转？的主要内容，如果未能解决你的问题，请参考以下文章