效果预览
分析:可以看出hover
的时候是有前后两个面的翻转,并且有一个凸出效果。
HTML分析
代码如下:
<ul class="block-menu">
<li>
<a href="#" class="three-d">
Home
<span class="three-d-box">
<span class="front">Home</span>
<span class="back">Home</span>
</span>
</a>
</li>
<li>
<a href="#" class="three-d">
Demo
<span class="three-d-box">
<span class="front">Demo</span>
<span class="back">Demo</span>
</span>
</a>
</li>
<li>
<a href="#" class="three-d">
Deal
<span class="three-d-box">
<span class="front">Deal</span>
<span class="back">Deal</span>
</span>
</a>
</li>
<li>
<a href="#" class="three-d">
About
<span class="three-d-box">
<span class="front">About</span>
<span class="back">About</span>
</span>
</a>
</li>
</ul>
<a>
标签里包裹一个<span>
盒子里包裹两个<span>
,为效果的前后面做准备。
CSS分析
1.外观、定位
代码如下:
*{ box-sizing:border-box;}
.block-menu{background:black;}
.block-menu li{display:inline-block;}
.block-menu li a{
color:#fff;
text-decoration:none;
text-transform:uppercase;
font-size:24px;
line-height:20px;
font-weight:bold;
font-family: Arial, sans-serif;
display:block;
padding:15px 10px;
}
.three-d{
position:relative;
}
.three-d-box,.front,.back{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
padding:15px 10px;
background:black;
}
2.3D效果
首先创造3D环境,保留3D空间:
.three-d{perspective:200px;}
.three-d-box{transform-style:preserve-3d;}
1.在three-d:hover
的时候,我们让.three-d-box
旋转,正面面对我们的元素向上翻转,下面有元素翻转上来,并且在翻转时有一个凸出来的效果。
2.关于这个凸出的效果,大家可以进行测试,如果一个元素是以自己的中心为中心点进行翻转时,是不会有凸出的效果。所以如果要制造一个凸出的效果,那么元素翻转的中心就一定不是自己的中心。
3.同时我们看到,在翻转的同时,元素贴回了ul
所在的平面的,因此应该是在Z轴上有一定负的位移。
根据以上3点,我们可以设置3D变换:
.three-d:hover .three-d-box{
transform:translateZ(-50px) rotateX(90deg);
}
在这里,我先设置translateZ
而不是rotateX
,是因为rotateX
之后坐标轴会变换,如果先roatetX
后translateZ
的话,Z轴的位移就不是垂直于ul
平面(面对我们)的位移了。
由于变换时,.three-d-box
有Z轴上的负位移,如果不给.front
,.back
设置Z轴上的位移的话,这两个平面最后不会贴回ul
的平面,而是在ul
平面的后面。因此,我们给.front
,.back
设置Z轴正方向且等于变化时的位移的距离,如此,变化时,这两个元素就会完美贴合ul
所在的平面了。
.front,.back{transform:translateZ(50px);}
变换时,.back
是从下面上来的,理应有一个rotateX(-90deg)
的旋转。如果先translateZ
再rotateX
的话,.back
所在的Y轴上的高度是<a>
的一半,动画时并没有从下面上来的效果,因此,应该先rotateX
变化坐标后再translateZ
,这样.back
就在ul的“下方”了。
.front{transform:rotateX(0deg) translateZ(50px);}
.back{transform:rotateX(-90deg) translateZ(50px);}
在没有hover
的情况下,由于给.front
,.back
设置了translateZ
,.front
,.back
看起来比正常的<a>
大。为了在没有hover
的情况下,.front
能贴合<a>
,我给.three-d
设置translateZ(-50px)
,这样.front
虽然先跟随.three-d
在Z轴上有-50px的负位移,但随后translateZ(50px)
又让它在Z轴上有50px的正位移,如此,便贴合了<a>
..three-d-box{transform:translateZ(-50px);}
最后,我们为这个变化添加一个过渡的效果:.three-d-box{transition:all .3s;}
3.注意
为了让效果明显,Z轴上的位移设置的较大值50px;在了解原理后,大家可以设置小一点的位移值,这样下方的
.back
就不会如此明显的看到了。hover
的时候,.three-d-box
旋转,它的子元素旋转的中心点是.three-d-box
的中心点而不是子元素自己的中心点哦~这样你才能看到有凸出的效果。hover
的时候是会覆盖原来的样式,所以hover
时,原始状态是.three-d-box
在Z轴的位移是0,.front
,.back
在Z轴的位移是50px;hover
的时候以此为起点进行变换。
最终3D相关代码如下:
.three-d{perspective:200px;}
.three-d-box{
transform-style:preserve-3d;
transform:translateZ(-25px);
transition: all .3s ;
}
.front{transform:rotateX(0deg) translateZ(25px);}
.back{transform:rotateX(-90deg) translateZ(25px);}
.three-d:hover .three-d-box{
transform: translateZ(-25px) rotateX(90deg);
}
总结
这个例子很好的说明了,一定要注意变换的中心点。
父元素变换时,子元素是以父元素的中心点为中心点变换的,而不是自己。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。