导航栏3D翻转效果

html-css017

导航栏3D翻转效果,第1张

有这样一种效果,导航栏上面的导航内容可以实现立体翻转的效果,这是怎样实现的呢?这是基于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度。

页面

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

新建一个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>

css3 现在每个浏览器支持的效果还不一样呢,可能是你的这个效果暂不支持吧,百度一下各浏览器对CSS3支持的情况就明白了。当然了,如果支持的话,各个浏览器的代码也可能是不同的,你或许在GOOGLE下要改变一下代码