利用CSS3实现立方体及移动组装效果
作者:强哥   类别:Web前端    日期:2018-10-29 16:31:26    阅读:2692 次   消耗积分:0 分

实现一个立方体


由于HTML页面都是平面,并没有提供标准的立方体解决方案,就像我们在一张A4纸上不可能绘制出一个标准的立方体,只能通过二维平面的视觉效果来模拟一个立方体效果,如图所示。


20181029_162810_694.png 

毫无疑问,上图中这个立方体只是一个视觉上的3D图像而已,那么我们要利用一个平面图来模拟这个3D图像,必然会使用到Transform的扭曲(skew)属性,以及精确的位移,甚至还需要一些三角形计算的知识和其他一个标准的CSS属性。

我们来看看具体实现的过程:


(1) 首先我们需要准备三个DIV,并且颜色不能一样,从而构成3D图形的三个面。正面,上面和右面。所以我们需要上面一个DIV,下面两个DIV,为了容易进行更精确的控制位置,我们可以使用绝对定位。初步设置后如图所示。


20181029_162825_824.png 

(2) 正面是一个正方形;上面需要让DIV向右沿X方向扭曲,则需要使用skewX;右面需要让DIV向上沿Y方向扭曲,则需要使用skewY

(3) 由于DIV的扭曲变形默认是沿中心点进行扭曲的,所以一旦执行扭曲后,上面和右面的位置将无法完全与下面的正方形对齐,所以我们还需要对其位置进行调整。

(4) 设置三条虚线,其中两条可对一个正方形DIV的左边和底边设置边框,另外一条斜的虚线则仍然需要对一个DIV使用Tranformrotate进行旋转,进面再对其位置进行调整。

(5) 最后对需要的地方进行微调,一个立方体就会出现。

读者可以沿此思路先自己先实现一遍,并对CSS的属性有更清晰的理解。实现代码如下:


<html>
<
head>
    <
meta charset="UTF-8">
    <
title></title>
    <
style>
        
#top {
            
width: 300px;
            
height: 150px;
            
background-color: lightgreen;
            
position: fixed;
            
top: 100px;
            
left: 475px;
            
transform: skewX(-45deg);
        }
        
#left {
            
width: 300px;
            
height: 300px;
            
background-color: orangered;
            
position: fixed;
            
top: 250px;
            
left: 400px;
        }
        
#right {
            
width: 150px;
            
height: 300px;
            
background-color: purple;
            
position: fixed;
            
top: 175px;
            
left: 700px;
            
transform: skewY(-45deg);
        }
        
#dash1 {
            
width: 300px;
            
height: 300px;
            
position: fixed;
            
border-width: 0 0 2px 2px;
            
border-color: white;
            
border-style: dashed;
            
left: 550px;
            
top: 100px;
        }
        
#dash2 {
            
width: 150px;
            
height: 0px;
            
position: fixed;
            
left: 400px;
            
top: 475px;
            
border-bottom: 2px dashed white;
            
transform: skewY(-45deg);
        }
    </
style>
</
head>
<
body>
    <
div id="top"></div>
    <
div id="left"></div>
    <
div id="right"></div>
    <
div id="dash1"></div>
    <
div id="dash2"></div>
</
body>
</
html>

 

上述代码中使用了绝对定位,当然,是否使用绝对定位不是必需的。实例代码只是为了考虑到接下来的一个实战。


实现立方体运动


上述代码已经实现了一个立方体,在对CSS的属性运用也有了更进一步的理解。现在,我们就基于该立方体,来实现一个动画效果,该动画效果的实现目的是:完成由三个DIV动态组合为立方体的动画过程。


先分析一下题意,要实现一个动态组合为立方体的过程,必然我们需要使用到Animation,同时,既然是动态组合,那么必然最开始的三个DIV是分散在各处的,通过动画运行的效果慢慢的组合而成。另外,组合完成后,我们还需要设置animation-fill-modeforwards,这样才可以和保持住这个立方体。


另外一方面,由于我们的立方体是位于页面的大约中间的位置(通过上一节的实战中使用绝对定位可以得出该结论),那么我们可以设置最开始的DIV的位置为任意位置,甚至设置为隐藏在浏览器窗口之外,从而实现突然飞入的效果(类似于PPT当中的动画特效)。那么,如何能够实现隐藏在浏览器窗口之外呢,其实方法非常简单,我们只需要设置DIV的定位为负数,或超过浏览器宽度的一个大值,比如top: -300px,则表示距离顶部-300你到,那么该DIV将隐藏中浏览器顶部。left: 2000px,则如果浏览器的宽度低于2000像素,那么相当于该DIV位于浏览器窗口的右侧不可见区域里。然后通过“@keyframes”来修改定位属性,让DIV慢慢出现即可。

基本的思路已经有了,我们现在来看看代码的具体实现:


<html>
<
head>
    <
meta charset="UTF-8">
    <
title></title>
    <
style>
        
#top {
            
width: 300px;
            
height: 150px;
            
background-color: lightgreen;
            
position: fixed;
            
animation: movetop 5s forwards;
            
top: -200px;
            
left: -200px;
        }
        
@keyframes movetop {
            
0%{}
            
100%{
                
top: 100px;
                
left: 475px;
                
transform: skewX(-45deg);
            }
        }

        
#left {
            
width: 300px;
            
height: 300px;
            
background-color: orangered;
            
position: fixed;
            
top: 550px;
            
left: 0px;
            
animation: moveleft 5s forwards;
        }
        
@keyframes moveleft {
            
0%{}
            
100%{
                
top: 250px;
                
left: 400px;
                
transform: rotate(1800deg);
            }
        }
        
#right {
            
width: 150px;
            
height: 300px;
            
background-color: purple;
            
position: fixed;
            
top: 775px;
            
left: 1700px;
            
animation: moveright 5s forwards;
        }
        
@keyframes moveright {
            
0%{}
            
100%{
                
top: 175px;
                
left: 700px;
                
transform: skewY(-45deg);
            }
        }
        
#dash1 {
            
width: 300px;
            
height: 300px;
            
position: fixed;
            
border-width: 0 0 2px 2px;
            
border-color: white;
            
border-style: dashed;
            
left: 550px;
            
top: 100px;
        }
        
#dash2 {
            
width: 150px;
            
height: 0px;
            
position: fixed;
            
left: 400px;
            
top: 475px;
            
border-bottom: 2px dashed white;
            
transform: skewY(-45deg);
        }
    </
style>
</
head>
<
body>
    <
div id="top"></div>
    <
div id="left"></div>
    <
div id="right"></div>
    <
div id="dash1"></div>
    <
div id="dash2"></div>
</
body>
</
html>

 

上述代码,看上去相对比较复杂,其实仔细分析发现,无非就是基于上一节的实战项目代码,修改了DIV的初始位置,添加了三个关键帧动画而已,并且动画的最终100%的关键帧就是我们的上一节的立方体的初始位置。

 





为了答谢大家对蜗牛学院的支持,蜗牛学院将会定期对大家免费发放干货,敬请关注蜗牛学院的官方微信。


20181009_153045_341.jpg




   
版权所有,转载本站文章请注明出处:蜗牛笔记, http://www.woniunote.com/article/209
上一篇: JS中的正则表达式应用
下一篇: 土木转IT,学习3个月零3天,进入上市公司,月薪5K包食宿
提示:登录后添加有效评论可享受积分哦!
最新文章
    最多阅读
      特别推荐
      回到顶部