css3 中怎样实现div的2d，3d旋转？

html-css011

css3 中怎样实现div的2d，3d旋转？,第1张

新建一个HTML文件粘过去:

<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>

有这样一种效果，导航栏上面的导航内容可以实现立体翻转的效果，这是怎样实现的呢？这是基于css动画属性实现的。

前提：忘了这个属性的具体内容的点击下方链接可以查看

css的transform属性： https://www.runoob.com/cssref/css3-pr-transform.html

有两个值 ：

1.1 flat:在2维平面呈现

1.2 preserve-3d:在3维空间呈现

每个li中放两个span , 最先展示前面的span ,当鼠标滑过的时候，前面的span沿着x轴向下翻转90度，后面的span沿着x轴向上翻转90度。

页面

最后：我目前没找到在中怎么加入视频的，现在看不了动态效果，如果哪位田螺姑娘/小哥知道怎么加入动图，可以留言教我一下，谢谢啦！