精华内容
下载资源
问答
  • 随着时代的发展,越来越多的事物渐渐通过3D立体的形式展现在大家的眼前,例如各种制作图、效果图等需要以3D技术绘制。迅捷CAD编辑器是很多人都在使用的一款操作简便、功能实用的CAD查看、编辑器。那么,大家知道怎么...

    CAD文件里面的二维平面图怎么转换成3D立体图?随着时代的发展,越来越多的事物渐渐通过3D立体的形式展现在大家的眼前,例如各种制作图、效果图等需要以3D技术绘制。迅捷CAD编辑器是很多人都在使用的一款操作简便、功能实用的CAD查看、编辑器。那么,大家知道怎么通过“迅捷CAD编辑器”把CAD文件里面的二维平面图转换成3D立体图吗?

    8121b2c0a6c2695b639ef89fd2b083f1.png

    接下来,就由小编给大家讲解一下迅捷CAD编辑器3D与2D互转功能的具体使用方法步骤吧。

    如果电脑上还没有这款软件的小伙伴,网上搜索迅捷CAD编辑器并下载。

    第一步:鼠标双击打开、运行已经下载、安装好的迅捷CAD编辑器,点击软件页面【打开更多文件】按钮,在文件选择框中把需要转换成3D立体图的CAD文件添加进来。

    c617290d3092afb7640ad4134f681eee.png

    第二步:点击页面左上方的【三维视图】功能按钮,进入3D查看页面。

    51c602026da2c4da830f38d0681176df.png

    第三步:进入3D查看页面后,可以选择不同的查看方式。

    535d6e9f3cdc9cd09992f26233c56b32.png

    以上内容,就是小编的全部分享啦。看完小编的分享,大家知道怎么通过迅捷CAD编辑器把CAD文件里面的二维平面图转换成3D立体图了吗?迅捷CAD编辑器没有冗余功能,轻松搞定、玩转各种CAD设计。大家期待掌握更多CAD查看、编辑的具体使用方法步骤的话,可以在“迅捷CAD编辑器”中慢慢摸索哦。

    展开全文
  • CSS3 3D 技术

    2019-07-25 21:59:59
    要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就...

    css3的3d起步

    要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转。平移同理。

    当然用理论来说明,估计你还不明白。下面是3个gif:

    • 沿着X轴旋转

    • 沿着Y轴旋转

    • 沿着Z轴旋转

    旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴、Y轴、z轴移动。

    你可能会说透视比较不好理解,下面我介绍一下透视的几个属性。

    perspective

    perspective英文名便是透视,没有这东西就没办法形成3D效果,但是这个东西是怎么让我们浏览器形成3D 效果的呢,可以看下面这张图,其实学过绘画的应该知道透视关系,而这里就是这个道理。

    但是在css里它是有数值的,例如perspective: 1000px这个代表什么呢?我们可以这样理解,如果我们直接眼睛靠着物体看,物体就超大占满我们的视线,我们离它距离越来越大,它在变小,立体感也就出来了是不是,其实这个数值构造了一个我们眼睛离屏幕的距离,也就构造了一个虚拟3D假象。

    perspective-origin

    由上面我们了解了perspective,而加上了这个origin是什么,我们前面说的这个是眼睛离物体的距离,而这个就是眼睛的视线,我们的视点的不同位置就决定了我们看到的不同景象,默认是中心,为perspectice-origin: 50% 50%,第一个数值是 3D 元素所基于的 X 轴,第二个定义在 y 轴上的位置

    当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。必须与 perspective 属性一同使用,而且只影响 3D 转换元素。(W3school)
    web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路

    transform-style

    perspective又来了,没错,它是css中3D的关键,transform-style默认是flat,如果你要在元素上视线3D效果的话,就必须用上transform-style: preserve-3d,否则就只是平面的变换,而不是3D的变换

    手把手带你玩转css3-3d

    以上我们稍微了解概念,下面就开始实战吧!

    我们看一个效果,是不是很酷炫~

    如果图片加载不出来,就直接访问https://bupt-hjm.github.io/css3-3d/

    第一步:html结构

    很简单的一个容器包裹着一个装了6个piecepiece-box

    <div class="container">
        <div class="piece-box">
            <div class="piece piece-1"></div>
            <div class="piece piece-2"></div>
            <div class="piece piece-3"></div>
            <div class="piece piece-4"></div>
            <div class="piece piece-5"></div>
            <div class="piece piece-6"></div>
        </div>
    </div>
    
    

    第二步: 加上必要的3D属性,进入3D世界

    通过上面的讲解,应该对perspective比较熟悉了吧,

    /*容器*/
    .container {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -ms-perspective: 1000px;
        perspective: 1000px;
    }
    /*piece盒子*/
     .piece-box {
            perspective-origin: 50% 50%;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
    }
    
    

    第三步:加入必要的样式

    /*容器*/
    .container {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -ms-perspective: 1000px;
        perspective: 1000px;
    }
    /*piece盒子*/
    .piece-box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 300px auto;
        perspective-origin: 50% 50%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    /*piece通用样式*/
    .piece {
        position: absolute;
        width: 200px;
        height: 200px;
        background: red;
        opacity: 0.5;
    
    }
    .piece-1 {
        background: #FF6666;
    
    }
    .piece-2 {
        background: #FFFF00;
    }
    .piece-3 {
        background: #006699;
    }
    .piece-4 {
        background: #009999;
    }
    .piece-5 {
        background: #FF0033;
    }
    .piece-6 {
        background: #FF6600;
    }
    
    

    当然,在你完成这步之后你还是只看到一个正方形,也就是我们的piece-6,因为我们的3Dtransform还没开始

    第四步:3D变换来袭

    首先是实现走马灯,我们先不要让它走,先实现灯部分。

    如何实现呢?因为要构成一个圆,圆是360度,而我们有6个piece,那么,很容易想到,我们需要把每一个piece以递增60度的方式rotateY,就变成如下

    如何把他们从中心拉开呢?

    这里我们还要注意一点,在我们使元素绕Y轴旋转以后,其实X轴和Z轴也会跟着旋转,所所以正方体的每个面的垂直线还是Z轴,我们就只需要改变下translateZ的值,而当translateZ为正的时候,就朝着我们的方向走来,这样就可以拉开了
    web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路

    但是拉开的距离如何衡量?

    是不是一目了然了~

    下面我们再修改下css

    .piece-1 {
        background: #FF6666;
        -webkit-transform: rotateY(0deg) translateZ(173.2px);
        -ms-transform: rotateY(0deg) translateZ(173.2px);
        -o-transform: rotateY(0deg) translateZ(173.2px);
        transform: rotateY(0deg) translateZ(173.2px);
    
    }
    .piece-2 {
        background: #FFFF00;
        -webkit-transform: rotateY(60deg) translateZ(173.2px);
        -ms-transform: rotateY(60deg) translateZ(173.2px);
        -o-transform: rotateY(60deg) translateZ(173.2px);
        transform: rotateY(60deg) translateZ(173.2px);
    }
    .piece-3 {
        background: #006699;
        -webkit-transform: rotateY(120deg) translateZ(173.2px);
        -ms-transform: rotateY(120deg) translateZ(173.2px);
        -o-transform: rotateY(120deg) translateZ(173.2px);
        transform: rotateY(120deg) translateZ(173.2px);
    }
    .piece-4 {
        background: #009999;
        -webkit-transform: rotateY(180deg) translateZ(173.2px);
        -ms-transform: rotateY(180deg) translateZ(173.2px);
        -o-transform: rotateY(180deg) translateZ(173.2px);
        transform: rotateY(180deg) translateZ(173.2px);
    }
    .piece-5 {
        background: #FF0033;
        -webkit-transform: rotateY(240deg) translateZ(173.2px);
        -ms-transform: rotateY(240deg) translateZ(173.2px);
        -o-transform: rotateY(240deg) translateZ(173.2px);
        transform: rotateY(240deg) translateZ(173.2px);
    }
    .piece-6 {
        background: #FF6600;
        -webkit-transform: rotateY(300deg) translateZ(173.2px);
        -ms-transform: rotateY(300deg) translateZ(173.2px);
        -o-transform: rotateY(300deg) translateZ(173.2px);
        transform: rotateY(300deg) translateZ(173.2px);
    }
    
    

    是不是已经实现了走马灯了?

    第五步:animation让3D动起来

    要实现走马灯动,其实很简单,我们只要在piece-box上加上旋转动画就行了,5s完成动画,从0度旋转到360度

    /*piece盒子*/
    .piece-box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 300px auto;
        perspective-origin: 50% 50%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        animation: pieceRotate 5s;
        -moz-animation: pieceRotate 5s; /* Firefox */
        -webkit-animation: pieceRotate 5s; /* Safari and Chrome */
        -o-animation: pieceRotate 5s ; /* Opera */
    }
    /*走马灯动画*/
    @keyframes pieceRotate
    {
    0%   {-webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(360deg);
            -ms-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);
            transform: rotateY(360deg);}
    }
    /* Firefox */
    @-moz-keyframes pieceRotate
    {
    0%   {-webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(360deg);
            -ms-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);
            transform: rotateY(360deg);}
    }
    /* Safari and Chrome */
    @-webkit-keyframes pieceRotate
    {
    0%   {-webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(360deg);
            -ms-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);
            transform: rotateY(360deg);}
    }
    /* Opera */
    @-o-keyframes pieceRotate
    {
    0%   {-webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(360deg);
            -ms-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);
            transform: rotateY(360deg);}
    }
    
    

    这里就不放gif了hhh是不是实现了酷炫的效果,还没结束哦更酷炫的正方体组装

    正方体,其实也不难实现,我这里就不很详细说了,你首先可以想象一个面,然后去拓展其他面如何去实现,比如我们把正方体的前面translateZ(100px)让它靠近我们100px,然后后面translateZ(-100px)让它远离我们100px,左边是先translateX(-100px再rotateY(90deg),右边就是translateX(100px)再rotateY(90deg),上面是先translateY(-100px),rotateX(90deg),下面是先translateY(100px),rotateX(90deg),只要我们写进动画,一切就大功告成。

    css就为如下,以下就只放piece1,其他读者可以自己类比实现,或者看我的源码

    .piece-1 {
         background: #FF6666;
         -webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);
         animation: piece1Rotate 5s 5s;
         -moz-animation: piece1Rotate 5s 5s; /* Firefox */
         -webkit-animation: piece1Rotate 5s 5s; /* Safari and Chrome */
         -o-animation: piece1Rotate 5s 5s; /* Opera */
         -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
          animation-fill-mode: forwards;
     }
    /*front*/
     @keyframes piece1Rotate
     {
     0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);}
     100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
         -ms-transform:  rotateY(0deg) translateZ(100px);
         -o-transform: rotateY(0deg)  translateZ(100px);
         transform:  rotateY(0deg) translateZ(100px);}
     }
     /* Firefox */
     @-moz-keyframes piece1Rotate
     {
     0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);}
     100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
         -ms-transform:  rotateY(0deg) translateZ(100px);
         -o-transform: rotateY(0deg)  translateZ(100px);
         transform:  rotateY(0deg) translateZ(100px);}
     }
     /* Safari and Chrome */
     @-webkit-keyframes piece1Rotate
     {
     0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);}
     100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
         -ms-transform:  rotateY(0deg) translateZ(100px);
         -o-transform: rotateY(0deg)  translateZ(100px);
         transform:  rotateY(0deg) translateZ(100px);}
     }
     /* Opera */
     @-o-keyframes piece1Rotate
     {
     0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);}
     100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
         -ms-transform:  rotateY(0deg) translateZ(100px);
         -o-transform: rotateY(0deg)  translateZ(100px);
         transform:  rotateY(0deg) translateZ(100px);}
     }
    
    

    细心的读者可以发现我用了一个animation-fill-mode: forwards;,这个其实就是让这些piece保持动画最后的效果,也就是正方体的效果,读者可以不加试试看,那还是会恢复原样。

    最后就是正方体的旋转了,前面我们的容器已经用过animation了,读者可能会想我再加个class放animaiton不就行了,hhh,animaiton会覆盖掉前面的,那前面的走马灯的动画就没了,所以在html结构中,我再加了一个box包裹piece, 如下

    <div class="container">
        <div class="piece-box">
            <div class="piece-box2"><!--新加的容器-->
                <div class="piece piece-1"></div>
                <div class="piece piece-2"></div>
                <div class="piece piece-3"></div>
                <div class="piece piece-4"></div>
                <div class="piece piece-5"></div>
                <div class="piece piece-6"></div>
            </div>
        </div>
    </div>
    
    

    动画上我们可以控制正方体动画的延时时间,就是等到正方体组装完成后再开始动画

    animation: boxRotate 5s 10s infinite;第一个5s是动画时长,第二个10s是延时时间,然后我们让正方体的旋转,绕X轴从0度到360度,绕Y轴也0到Y轴360度。

    .piece-box2 {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        animation: boxRotate 5s 10s infinite;
        -moz-animation: boxRotate 5s 10s infinite; /* Firefox */
        -webkit-animation: boxRotate 5s 10s infinite; /* Safari and Chrome */
        -o-animation: boxRotate 5s 10s infinite; /* Opera */
    }
    /*正方体旋转动画*/
    @keyframes boxRotate
    {
    0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
        -ms-transform: rotateX(0deg) rotateY(0deg););
        -o-transform: rotateX(0deg) rotateY(0deg););
        transform: rotateX(0deg) rotateY(0deg););}
    100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
        -ms-transform: rotateX(360deg) rotateY(360deg);
        -o-transform: rotateX(360deg) rotateY(360deg);
        transform: rotateX(360deg) rotateY(360deg);}
    }
    /* Firefox */
    @-moz-keyframes boxRotate
    {
    0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
        -ms-transform: rotateX(0deg) rotateY(0deg););
        -o-transform: rotateX(0deg) rotateY(0deg););
        transform: rotateX(0deg) rotateY(0deg););}
    100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
        -ms-transform: rotateX(360deg) rotateY(360deg);
        -o-transform: rotateX(360deg) rotateY(360deg);
        transform: rotateX(360deg) rotateY(360deg);}
    }
    /* Safari and Chrome */
    @-webkit-keyframes boxRotate
    {
    0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
        -ms-transform: rotateX(0deg) rotateY(0deg););
        -o-transform: rotateX(0deg) rotateY(0deg););
        transform: rotateX(0deg) rotateY(0deg););}
    100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
        -ms-transform: rotateX(360deg) rotateY(360deg);
        -o-transform: rotateX(360deg) rotateY(360deg);
        transform: rotateX(360deg) rotateY(360deg);}
    }
    /* Opera */
    @-o-keyframes boxRotate
    {
    0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
        -ms-transform: rotateX(0deg) rotateY(0deg););
        -o-transform: rotateX(0deg) rotateY(0deg););
        transform: rotateX(0deg) rotateY(0deg););}
    100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
        -ms-transform: rotateX(360deg) rotateY(360deg);
        -o-transform: rotateX(360deg) rotateY(360deg);
        transform: rotateX(360deg) rotateY(360deg);}
    }
    web前端开发学习Q-q-u-n: 767273102 ,分享开发工具,零基础,进阶视频教程,希望新手少走弯路
    

    好啦,结束啦!

    展开全文
  • 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就...
  • 手把手教你玩 CSS3 3D 技术 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D...

    手把手教你玩转 CSS3 3D 技术

     

    要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转。平移同理。

    当然用理论来说明,估计你还不明白。下面是3个gif:

    • 沿着X轴旋转
    • 沿着Y轴旋转
    • 沿着Z轴旋转

    旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴、Y轴、z轴移动。

    你可能会说透视比较不好理解,下面我介绍一下透视的几个属性。

    perspective

    perspective英文名便是透视,没有这东西就没办法形成3D效果,但是这个东西是怎么让我们浏览器形成3D 效果的呢,可以看下面这张图,其实学过绘画的应该知道透视关系,而这里就是这个道理。

    但是在css里它是有数值的,例如perspective: 1000px这个代表什么呢?我们可以这样理解,如果我们直接眼睛靠着物体看,物体就超大占满我们的视线,我们离它距离越来越大,它在变小,立体感也就出来了是不是,其实这个数值构造了一个我们眼睛离屏幕的距离,也就构造了一个虚拟3D假象。

    perspective-origin

    由上面我们了解了perspective,而加上了这个origin是什么,我们前面说的这个是眼睛离物体的距离,而这个就是眼睛的视线,我们的视点的不同位置就决定了我们看到的不同景象,默认是中心,为perspectice-origin: 50% 50%,第一个数值是 3D 元素所基于的 X 轴,第二个定义在 y 轴上的位置

    当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。必须与 perspective 属性一同使用,而且只影响 3D 转换元素。(W3school)

    transform-style

    perspective又来了,没错,它是css中3D的关键,transform-style默认是flat,如果你要在元素上视线3D效果的话,就必须用上transform-style: preserve-3d,否则就只是平面的变换,而不是3D的变换

    手把手带你玩转css3-3d

    以上我们稍微了解概念,下面就开始实战吧!

    我们看一个效果,是不是很酷炫~

    如果图片加载不出来,就直接访问在线预览,觉得可以的话记得给star咯hh

    在线预览    源码下载

    第一步:html结构

    很简单的一个容器包裹着一个装了6个piecepiece-box

    <div class="container">
        <div class="piece-box">
            <div class="piece piece-1"></div>
            <div class="piece piece-2"></div>
            <div class="piece piece-3"></div>
            <div class="piece piece-4"></div>
            <div class="piece piece-5"></div>
            <div class="piece piece-6"></div>
        </div>
    </div>

    第二步: 加上必要的3D属性,进入3D世界

    通过上面的讲解,应该对perspective比较熟悉了吧,

    /*容器*/
    .container {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -ms-perspective: 1000px;
        perspective: 1000px;
    }
    /*piece盒子*/
     .piece-box {
            perspective-origin: 50% 50%;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
    }

    第三步:加入必要的样式

    /*容器*/
    .container {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -ms-perspective: 1000px;
        perspective: 1000px;
    }
    /*piece盒子*/
    .piece-box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 300px auto;
        perspective-origin: 50% 50%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    /*piece通用样式*/
    .piece {
        position: absolute;
        width: 200px;
        height: 200px;
        background: red;
        opacity: 0.5;
     
    }
    .piece-1 {
        background: #FF6666;
     
    }
    .piece-2 {
        background: #FFFF00;
    }
    .piece-3 {
        background: #006699;
    }
    .piece-4 {
        background: #009999;
    }
    .piece-5 {
        background: #FF0033;
    }
    .piece-6 {
        background: #FF6600;
    }

    当然,在你完成这步之后你还是只看到一个正方形,也就是我们的piece-6,因为我们的3Dtransform还没开始

    第四步:3D变换来袭

    首先是实现走马灯,我们先不要让它走,先实现灯部分。

    如何实现呢?因为要构成一个圆,圆是360度,而我们有6个piece,那么,很容易想到,我们需要把每一个piece以递增60度的方式rotateY,就变成如下


    如何把他们从中心拉开呢?

    这里我们还要注意一点,在我们使元素绕Y轴旋转以后,其实X轴和Z轴也会跟着旋转,所所以正方体的每个面的垂直线还是Z轴,我们就只需要改变下translateZ的值,而当translateZ为正的时候,就朝着我们的方向走来,这样就可以拉开了

    但是拉开的距离如何衡量?

    是不是一目了然了~

    下面我们再修改下css

    .piece-1 {
        background: #FF6666;
        -webkit-transform: rotateY(0deg) translateZ(173.2px);
        -ms-transform: rotateY(0deg) translateZ(173.2px);
        -o-transform: rotateY(0deg) translateZ(173.2px);
        transform: rotateY(0deg) translateZ(173.2px);
     
    }
    .piece-2 {
        background: #FFFF00;
        -webkit-transform: rotateY(60deg) translateZ(173.2px);
        -ms-transform: rotateY(60deg) translateZ(173.2px);
        -o-transform: rotateY(60deg) translateZ(173.2px);
        transform: rotateY(60deg) translateZ(173.2px);
    }
    .piece-3 {
        background: #006699;
        -webkit-transform: rotateY(120deg) translateZ(173.2px);
        -ms-transform: rotateY(120deg) translateZ(173.2px);
        -o-transform: rotateY(120deg) translateZ(173.2px);
        transform: rotateY(120deg) translateZ(173.2px);
    }
    .piece-4 {
        background: #009999;
        -webkit-transform: rotateY(180deg) translateZ(173.2px);
        -ms-transform: rotateY(180deg) translateZ(173.2px);
        -o-transform: rotateY(180deg) translateZ(173.2px);
        transform: rotateY(180deg) translateZ(173.2px);
    }
    .piece-5 {
        background: #FF0033;
        -webkit-transform: rotateY(240deg) translateZ(173.2px);
        -ms-transform: rotateY(240deg) translateZ(173.2px);
        -o-transform: rotateY(240deg) translateZ(173.2px);
        transform: rotateY(240deg) translateZ(173.2px);
    }
    .piece-6 {
        background: #FF6600;
        -webkit-transform: rotateY(300deg) translateZ(173.2px);
        -ms-transform: rotateY(300deg) translateZ(173.2px);
        -o-transform: rotateY(300deg) translateZ(173.2px);
        transform: rotateY(300deg) translateZ(173.2px);
    }

    是不是已经实现了走马灯了?

    第五步:animation让3D动起来

    要实现走马灯动,其实很简单,我们只要在piece-box上加上旋转动画就行了,5s完成动画,从0度旋转到360度

    /*piece盒子*/
    .piece-box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 300px auto;
        perspective-origin: 50% 50%;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        animation: pieceRotate 5s;
        -moz-animation: pieceRotate 5s; /* Firefox */
        -webkit-animation: pieceRotate 5s; /* Safari and Chrome */
        -o-animation: pieceRotate 5s ; /* Opera */
    }
    /*走马灯动画*/
    @keyframes pieceRotate
    {
    0%   {-webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(360deg);
            -ms-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);
            transform: rotateY(360deg);}
    }
    /* Firefox */
    @-moz-keyframes pieceRotate
    {
    0%   {-webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(360deg);
            -ms-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);
            transform: rotateY(360deg);}
    }
    /* Safari and Chrome */
    @-webkit-keyframes pieceRotate
    {
    0%   {-webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(360deg);
            -ms-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);
            transform: rotateY(360deg);}
    }
    /* Opera */
    @-o-keyframes pieceRotate
    {
    0%   {-webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg);}
    100% {-webkit-transform: rotateY(360deg);
            -ms-transform: rotateY(360deg);
            -o-transform: rotateY(360deg);
            transform: rotateY(360deg);}
    }

    这里就不放gif了~hhh是不是实现了酷炫的效果,还没结束哦~更酷炫的正方体组装

    正方体,其实也不难实现,我这里就不很详细说了,你首先可以想象一个面,然后去拓展其他面如何去实现,比如我们把正方体的前面translateZ(100px)让它靠近我们100px,然后后面translateZ(-100px)让它远离我们100px,左边是先translateX(-100pxrotateY(90deg),右边就是translateX(100px)rotateY(90deg),上面是先translateY(-100px)rotateX(90deg),下面是先translateY(100px)rotateX(90deg),只要我们写进动画,一切就大功告成。

    css就为如下,以下就只放piece1,其他读者可以自己类比实现,或者看我github的源码

    .piece-1 {
         background: #FF6666;
         -webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);
         animation: piece1Rotate 5s 5s;
         -moz-animation: piece1Rotate 5s 5s; /* Firefox */
         -webkit-animation: piece1Rotate 5s 5s; /* Safari and Chrome */
         -o-animation: piece1Rotate 5s 5s; /* Opera */
         -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
          animation-fill-mode: forwards;
     }
    /*front*/
     @keyframes piece1Rotate
     {
     0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);}
     100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
         -ms-transform:  rotateY(0deg) translateZ(100px);
         -o-transform: rotateY(0deg)  translateZ(100px);
         transform:  rotateY(0deg) translateZ(100px);}
     }
     /* Firefox */
     @-moz-keyframes piece1Rotate
     {
     0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);}
     100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
         -ms-transform:  rotateY(0deg) translateZ(100px);
         -o-transform: rotateY(0deg)  translateZ(100px);
         transform:  rotateY(0deg) translateZ(100px);}
     }
     /* Safari and Chrome */
     @-webkit-keyframes piece1Rotate
     {
     0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);}
     100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
         -ms-transform:  rotateY(0deg) translateZ(100px);
         -o-transform: rotateY(0deg)  translateZ(100px);
         transform:  rotateY(0deg) translateZ(100px);}
     }
     /* Opera */
     @-o-keyframes piece1Rotate
     {
     0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);
         -ms-transform: rotateY(0deg) translateZ(173.2px);
         -o-transform: rotateY(0deg) translateZ(173.2px);
         transform: rotateY(0deg) translateZ(173.2px);}
     100% {-webkit-transform: rotateY(0deg)  translateZ(100px);
         -ms-transform:  rotateY(0deg) translateZ(100px);
         -o-transform: rotateY(0deg)  translateZ(100px);
         transform:  rotateY(0deg) translateZ(100px);}
     }

    细心的读者可以发现我用了一个animation-fill-mode: forwards;,这个其实就是让这些piece保持动画最后的效果,也就是正方体的效果,读者可以不加试试看,那还是会恢复原样。

    最后就是正方体的旋转了,前面我们的容器已经用过animation了,读者可能会想我再加个class放animaiton不就行了,hhh,animaiton会覆盖掉前面的,那前面的走马灯的动画就没了,所以在html结构中,我再加了一个box包裹piece, 如下

    <div class="container">
        <div class="piece-box">
            <div class="piece-box2"><!--新加的容器-->
                <div class="piece piece-1"></div>
                <div class="piece piece-2"></div>
                <div class="piece piece-3"></div>
                <div class="piece piece-4"></div>
                <div class="piece piece-5"></div>
                <div class="piece piece-6"></div>
            </div>
        </div>
    </div>

    在动画上我们可以控制正方体动画的延时时间,就是等到正方体组装完成后再开始动画

    animation: boxRotate 5s 10s infinite;第一个5s是动画时长,第二个10s是延时时间,然后我们让正方体的旋转,绕X轴从0度到360度,绕Y轴也0到Y轴360度。

    .piece-box2 {
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        animation: boxRotate 5s 10s infinite;
        -moz-animation: boxRotate 5s 10s infinite; /* Firefox */
        -webkit-animation: boxRotate 5s 10s infinite; /* Safari and Chrome */
        -o-animation: boxRotate 5s 10s infinite; /* Opera */
    }
    /*正方体旋转动画*/
    @keyframes boxRotate
    {
    0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
        -ms-transform: rotateX(0deg) rotateY(0deg););
        -o-transform: rotateX(0deg) rotateY(0deg););
        transform: rotateX(0deg) rotateY(0deg););}
    100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
        -ms-transform: rotateX(360deg) rotateY(360deg);
        -o-transform: rotateX(360deg) rotateY(360deg);
        transform: rotateX(360deg) rotateY(360deg);}
    }
    /* Firefox */
    @-moz-keyframes boxRotate
    {
    0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
        -ms-transform: rotateX(0deg) rotateY(0deg););
        -o-transform: rotateX(0deg) rotateY(0deg););
        transform: rotateX(0deg) rotateY(0deg););}
    100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
        -ms-transform: rotateX(360deg) rotateY(360deg);
        -o-transform: rotateX(360deg) rotateY(360deg);
        transform: rotateX(360deg) rotateY(360deg);}
    }
    /* Safari and Chrome */
    @-webkit-keyframes boxRotate
    {
    0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
        -ms-transform: rotateX(0deg) rotateY(0deg););
        -o-transform: rotateX(0deg) rotateY(0deg););
        transform: rotateX(0deg) rotateY(0deg););}
    100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
        -ms-transform: rotateX(360deg) rotateY(360deg);
        -o-transform: rotateX(360deg) rotateY(360deg);
        transform: rotateX(360deg) rotateY(360deg);}
    }
    /* Opera */
    @-o-keyframes boxRotate
    {
    0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););
        -ms-transform: rotateX(0deg) rotateY(0deg););
        -o-transform: rotateX(0deg) rotateY(0deg););
        transform: rotateX(0deg) rotateY(0deg););}
    100% {-webkit-transform: rotateX(360deg) rotateY(360deg);
        -ms-transform: rotateX(360deg) rotateY(360deg);
        -o-transform: rotateX(360deg) rotateY(360deg);
        transform: rotateX(360deg) rotateY(360deg);}
    }

    最后效果,大功告成!

    在线预览    源码下载

    最后分享5个css3 3D技术实现的实例:

    1. html5+css3点击眼睛玩游戏源码

    2. CSS3制作3D图片立方体旋转特效

    3. jQuery和CSS3超酷3D翻转式模态对话框插件

    4. 炫酷带方向感应的鼠标滑过图片3D动画特效

    5. 纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效

    转载于:https://www.cnblogs.com/think90/p/5730303.html

    展开全文
  • 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就...

    css3的3d起步

    要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转。平移同理。

    当然用理论来说明,估计你还不明白。下面是3个gif:

    • 沿着X轴旋转

    • 沿着Y轴旋转

    • 沿着Z轴旋转

    旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴、Y轴、z轴移动。

    你可能会说透视比较不好理解,下面我介绍一下透视的几个属性。

     

    perspective

    perspective英文名便是透视,没有这东西就没办法形成3D效果,但是这个东西是怎么让我们浏览器形成3D 效果的呢,可以看下面这张图,其实学过绘画的应该知道透视关系,而这里就是这个道理。

     

    但是在css里它是有数值的,例如perspective: 1000px这个代表什么呢?我们可以这样理解,如果我们直接眼睛靠着物体看,物体就超大占满我们的视线,我们离它距离越来越大,它在变小,立体感也就出来了是不是,其实这个数值构造了一个我们眼睛离屏幕的距离,也就构造了一个虚拟3D假象。

     

    perspective-origin

    由上面我们了解了perspective,而加上了这个origin是什么,我们前面说的这个是眼睛离物体的距离,而这个就是眼睛的视线,我们的视点的不同位置就决定了我们看到的不同景象,默认是中心,为perspectice-origin: 50% 50%,第一个数值是 3D 元素所基于的 X 轴,第二个定义在 y 轴上的位置

    当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。必须与 perspective 属性一同使用,而且只影响 3D 转换元素。(W3school)

     

     

    transform-style

    perspective又来了,没错,它是css中3D的关键,transform-style默认是flat,如果你要在元素上视线3D效果的话,就必须用上transform-style: preserve-3d,否则就只是平面的变换,而不是3D的变换

    手把手带你玩转css3-3d

    以上我们稍微了解概念,下面就开始实战吧!


    第一步:html结构

    很简单的一个容器包裹着一个装了6个piece的piece-box

    [HTML] 纯文本查看 复制代码

    ?

    1

    <div class="container">    <div class="piece-box">        <div class="piece piece-1"></div>        <div class="piece piece-2"></div>        <div class="piece piece-3"></div>        <div class="piece piece-4"></div>        <div class="piece piece-5"></div>        <div class="piece piece-6"></div>    </div></div>



    第二步: 加上必要的3D属性,进入3D世界

    通过上面的讲解,应该对perspective比较熟悉了吧,

    [CSS] 纯文本查看 复制代码

    ?

    1

    /*容器*/.container {    -webkit-perspective: 1000px;    -moz-perspective: 1000px;    -ms-perspective: 1000px;    perspective: 1000px;}/*piece盒子*/ .piece-box {        perspective-origin: 50% 50%;        -webkit-transform-style: preserve-3d;        -moz-transform-style: preserve-3d;        -ms-transform-style: preserve-3d;        transform-style: preserve-3d;}第三步:加入必要的样式/*容器*/.container {    -webkit-perspective: 1000px;    -moz-perspective: 1000px;    -ms-perspective: 1000px;    perspective: 1000px;}/*piece盒子*/.piece-box {    position: relative;    width: 200px;    height: 200px;    margin: 300px auto;    perspective-origin: 50% 50%;    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;    -ms-transform-style: preserve-3d;    transform-style: preserve-3d;}/*piece通用样式*/.piece {    position: absolute;    width: 200px;    height: 200px;    background: red;    opacity: 0.5;}.piece-1 {    background: #FF6666;}.piece-2 {    background: #FFFF00;}.piece-3 {    background: #006699;}.piece-4 {    background: #009999;}.piece-5 {    background: #FF0033;}.piece-6 {    background: #FF6600;}

     

    当然,在你完成这步之后你还是只看到一个正方形,也就是我们的piece-6,因为我们的3Dtransform还没开始

     

    第四步:3D变换来袭

    首先是实现走马灯,我们先不要让它走,先实现灯部分。

    如何实现呢?因为要构成一个圆,圆是360度,而我们有6个piece,那么,很容易想到,我们需要把每一个piece以递增60度的方式rotateY,就变成如下



    如何把他们从中心拉开呢?

     

    这里我们还要注意一点,在我们使元素绕Y轴旋转以后,其实X轴和Z轴也会跟着旋转,所所以正方体的每个面的垂直线还是Z轴,我们就只需要改变下translateZ的值,而当translateZ为正的时候,就朝着我们的方向走来,这样就可以拉开了

    但是拉开的距离如何衡量?

     

    是不是一目了然了~

    下面我们再修改下css

    [CSS] 纯文本查看 复制代码

    ?

    1

    .piece-1 {    background: #FF6666;    -webkit-transform: rotateY(0deg) translateZ(173.2px);    -ms-transform: rotateY(0deg) translateZ(173.2px);    -o-transform: rotateY(0deg) translateZ(173.2px);    transform: rotateY(0deg) translateZ(173.2px);}.piece-2 {    background: #FFFF00;    -webkit-transform: rotateY(60deg) translateZ(173.2px);    -ms-transform: rotateY(60deg) translateZ(173.2px);    -o-transform: rotateY(60deg) translateZ(173.2px);    transform: rotateY(60deg) translateZ(173.2px);}.piece-3 {    background: #006699;    -webkit-transform: rotateY(120deg) translateZ(173.2px);    -ms-transform: rotateY(120deg) translateZ(173.2px);    -o-transform: rotateY(120deg) translateZ(173.2px);    transform: rotateY(120deg) translateZ(173.2px);}.piece-4 {    background: #009999;    -webkit-transform: rotateY(180deg) translateZ(173.2px);    -ms-transform: rotateY(180deg) translateZ(173.2px);    -o-transform: rotateY(180deg) translateZ(173.2px);    transform: rotateY(180deg) translateZ(173.2px);}.piece-5 {    background: #FF0033;    -webkit-transform: rotateY(240deg) translateZ(173.2px);    -ms-transform: rotateY(240deg) translateZ(173.2px);    -o-transform: rotateY(240deg) translateZ(173.2px);    transform: rotateY(240deg) translateZ(173.2px);}.piece-6 {    background: #FF6600;    -webkit-transform: rotateY(300deg) translateZ(173.2px);    -ms-transform: rotateY(300deg) translateZ(173.2px);    -o-transform: rotateY(300deg) translateZ(173.2px);    transform: rotateY(300deg) translateZ(173.2px);}

     

     

    第五步:animation让3D动起来

    要实现走马灯动,其实很简单,我们只要在piece-box上加上旋转动画就行了,5s完成动画,从0度旋转到360度

    [CSS] 纯文本查看 复制代码

    ?

    1

    /*piece盒子*/.piece-box {    position: relative;    width: 200px;    height: 200px;    margin: 300px auto;    perspective-origin: 50% 50%;    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;    -ms-transform-style: preserve-3d;    transform-style: preserve-3d;    animation: pieceRotate 5s;    -moz-animation: pieceRotate 5s; /* Firefox */    -webkit-animation: pieceRotate 5s; /* Safari and Chrome */    -o-animation: pieceRotate 5s ; /* Opera */}/*走马灯动画*/@keyframes pieceRotate{0%   {-webkit-transform: rotateY(0deg);        -ms-transform: rotateY(0deg);        -o-transform: rotateY(0deg);        transform: rotateY(0deg);}100% {-webkit-transform: rotateY(360deg);        -ms-transform: rotateY(360deg);        -o-transform: rotateY(360deg);        transform: rotateY(360deg);}}/* Firefox */@-moz-keyframes pieceRotate{0%   {-webkit-transform: rotateY(0deg);        -ms-transform: rotateY(0deg);        -o-transform: rotateY(0deg);        transform: rotateY(0deg);}100% {-webkit-transform: rotateY(360deg);        -ms-transform: rotateY(360deg);        -o-transform: rotateY(360deg);        transform: rotateY(360deg);}}/* Safari and Chrome */@-webkit-keyframes pieceRotate{0%   {-webkit-transform: rotateY(0deg);        -ms-transform: rotateY(0deg);        -o-transform: rotateY(0deg);        transform: rotateY(0deg);}100% {-webkit-transform: rotateY(360deg);        -ms-transform: rotateY(360deg);        -o-transform: rotateY(360deg);        transform: rotateY(360deg);}}/* Opera */@-o-keyframes pieceRotate{0%   {-webkit-transform: rotateY(0deg);        -ms-transform: rotateY(0deg);        -o-transform: rotateY(0deg);        transform: rotateY(0deg);}100% {-webkit-transform: rotateY(360deg);        -ms-transform: rotateY(360deg);        -o-transform: rotateY(360deg);        transform: rotateY(360deg);}}

     

    这里就不放gif了~hhh是不是实现了酷炫的效果,还没结束哦~更酷炫的正方体组装

    正方体,其实也不难实现,我这里就不很详细说了,你首先可以想象一个面,然后去拓展其他面如何去实现,比如我们把正方体的前面translateZ(100px)让它靠近我们100px,然后后面translateZ(-100px)让它远离我们100px,左边是先translateX(-100px再rotateY(90deg),右边就是translateX(100px)再rotateY(90deg),上面是先translateY(-100px),rotateX(90deg),下面是先translateY(100px),rotateX(90deg),只要我们写进动画,一切就大功告成。

    css就为如下,以下就只放piece1,其他读者可以自己类比实现,或者看我github的源码

    [CSS] 纯文本查看 复制代码

    ?

    1

    .piece-1 {     background: #FF6666;     -webkit-transform: rotateY(0deg) translateZ(173.2px);     -ms-transform: rotateY(0deg) translateZ(173.2px);     -o-transform: rotateY(0deg) translateZ(173.2px);     transform: rotateY(0deg) translateZ(173.2px);     animation: piece1Rotate 5s 5s;     -moz-animation: piece1Rotate 5s 5s; /* Firefox */     -webkit-animation: piece1Rotate 5s 5s; /* Safari and Chrome */     -o-animation: piece1Rotate 5s 5s; /* Opera */     -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */      animation-fill-mode: forwards; }/*front*/ @keyframes piece1Rotate { 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     -ms-transform: rotateY(0deg) translateZ(173.2px);     -o-transform: rotateY(0deg) translateZ(173.2px);     transform: rotateY(0deg) translateZ(173.2px);} 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     -ms-transform:  rotateY(0deg) translateZ(100px);     -o-transform: rotateY(0deg)  translateZ(100px);     transform:  rotateY(0deg) translateZ(100px);} } /* Firefox */ @-moz-keyframes piece1Rotate { 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     -ms-transform: rotateY(0deg) translateZ(173.2px);     -o-transform: rotateY(0deg) translateZ(173.2px);     transform: rotateY(0deg) translateZ(173.2px);} 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     -ms-transform:  rotateY(0deg) translateZ(100px);     -o-transform: rotateY(0deg)  translateZ(100px);     transform:  rotateY(0deg) translateZ(100px);} } /* Safari and Chrome */ @-webkit-keyframes piece1Rotate { 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     -ms-transform: rotateY(0deg) translateZ(173.2px);     -o-transform: rotateY(0deg) translateZ(173.2px);     transform: rotateY(0deg) translateZ(173.2px);} 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     -ms-transform:  rotateY(0deg) translateZ(100px);     -o-transform: rotateY(0deg)  translateZ(100px);     transform:  rotateY(0deg) translateZ(100px);} } /* Opera */ @-o-keyframes piece1Rotate { 0%   {-webkit-transform: rotateY(0deg) translateZ(173.2px);     -ms-transform: rotateY(0deg) translateZ(173.2px);     -o-transform: rotateY(0deg) translateZ(173.2px);     transform: rotateY(0deg) translateZ(173.2px);} 100% {-webkit-transform: rotateY(0deg)  translateZ(100px);     -ms-transform:  rotateY(0deg) translateZ(100px);     -o-transform: rotateY(0deg)  translateZ(100px);     transform:  rotateY(0deg) translateZ(100px);} }

     

    细心的读者可以发现我用了一个animation-fill-mode: forwards;,这个其实就是让这些piece保持动画最后的效果,也就是正方体的效果,读者可以不加试试看,那还是会恢复原样。

    最后就是正方体的旋转了,前面我们的容器已经用过animation了,读者可能会想我再加个class放animaiton不就行了,hhh,animaiton会覆盖掉前面的,那前面的走马灯的动画就没了,所以在html结构中,我再加了一个box包裹piece, 如下

    [HTML] 纯文本查看 复制代码

    ?

    1

    <div class="container">    <div class="piece-box">        <div class="piece-box2"><!--新加的容器-->            <div class="piece piece-1"></div>            <div class="piece piece-2"></div>            <div class="piece piece-3"></div>            <div class="piece piece-4"></div>            <div class="piece piece-5"></div>            <div class="piece piece-6"></div>        </div>    </div></div>

     

    在动画上我们可以控制正方体动画的延时时间,就是等到正方体组装完成后再开始动画

    animation: boxRotate 5s 10s infinite;第一个5s是动画时长,第二个10s是延时时间,然后我们让正方体的旋转,绕X轴从0度到360度,绕Y轴也0到Y轴360度。

    [CSS] 纯文本查看 复制代码

    ?

    1

    .piece-box2 {    -webkit-transform-style: preserve-3d;    -moz-transform-style: preserve-3d;    -ms-transform-style: preserve-3d;    transform-style: preserve-3d;    animation: boxRotate 5s 10s infinite;    -moz-animation: boxRotate 5s 10s infinite; /* Firefox */    -webkit-animation: boxRotate 5s 10s infinite; /* Safari and Chrome */    -o-animation: boxRotate 5s 10s infinite; /* Opera */}/*正方体旋转动画*/@keyframes boxRotate{0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););    -ms-transform: rotateX(0deg) rotateY(0deg););    -o-transform: rotateX(0deg) rotateY(0deg););    transform: rotateX(0deg) rotateY(0deg););}100% {-webkit-transform: rotateX(360deg) rotateY(360deg);    -ms-transform: rotateX(360deg) rotateY(360deg);    -o-transform: rotateX(360deg) rotateY(360deg);    transform: rotateX(360deg) rotateY(360deg);}}/* Firefox */@-moz-keyframes boxRotate{0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););    -ms-transform: rotateX(0deg) rotateY(0deg););    -o-transform: rotateX(0deg) rotateY(0deg););    transform: rotateX(0deg) rotateY(0deg););}100% {-webkit-transform: rotateX(360deg) rotateY(360deg);    -ms-transform: rotateX(360deg) rotateY(360deg);    -o-transform: rotateX(360deg) rotateY(360deg);    transform: rotateX(360deg) rotateY(360deg);}}/* Safari and Chrome */@-webkit-keyframes boxRotate{0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););    -ms-transform: rotateX(0deg) rotateY(0deg););    -o-transform: rotateX(0deg) rotateY(0deg););    transform: rotateX(0deg) rotateY(0deg););}100% {-webkit-transform: rotateX(360deg) rotateY(360deg);    -ms-transform: rotateX(360deg) rotateY(360deg);    -o-transform: rotateX(360deg) rotateY(360deg);    transform: rotateX(360deg) rotateY(360deg);}}/* Opera */@-o-keyframes boxRotate{0%   {-webkit-transform: rotateX(0deg) rotateY(0deg););    -ms-transform: rotateX(0deg) rotateY(0deg););    -o-transform: rotateX(0deg) rotateY(0deg););    transform: rotateX(0deg) rotateY(0deg););}100% {-webkit-transform: rotateX(360deg) rotateY(360deg);    -ms-transform: rotateX(360deg) rotateY(360deg);    -o-transform: rotateX(360deg) rotateY(360deg);    transform: rotateX(360deg) rotateY(360deg);}}



    最后效果,大功告成!

    展开全文
  • 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就...
  • 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就...
  • 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就...
  • 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就...
  • 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就...
  • 平面图片立体软件

    2015-12-07 11:06:11
    立体软件光栅材料网地主要提供立体行业投资所需的技术、原材料和相关素材,包括高端立体软件3d4u,psdto3d,3d之星等),ZTQ 3D 也是其中一款
  • 2D转换 + 动画 + 3D转换

    2020-05-28 13:47:32
    2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系 1.2 2D转换至移动 translate 2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。 语法: transform: translate(x,y)...
  • 很少有将这个原理讲得通俗易懂,特别清楚的,我尝试下自己阐述技术问题的能力,希望能让对这个问题迷糊的朋友明白其中的原理。  在这里我假设读者对Quake3的几何组织方式已经颇有了解,所以接下来我会直接进入主题...
  • 很少有将这个原理讲得通俗易懂,特别清楚的,我尝试下自己阐述技术问题的能力,希望能让对这个问题迷糊的朋友明白其中的原理。 在这里我假设读者对Quake3的几何组织方式已经颇有了解,所以接下来我会直接进入主题...
  • 随着技术发展,界面越来越简易化,二维的操作难以提供更好的交互体验,因此平面化的操作界面转向3D 空间维度发展,我们又迎来的了新的时代,一场革命性新的交互体验;本次分享,作为3D UI的概述,以下就整体的来了解...
  • 2020年9月23日,专注搭建全球范围内信息交流和贸促平台的SMT专业盛会《SbSTC一步步新技术研讨会》圆满成功举办,本次论坛以“智能工厂现代化转型与可靠性提升方案”为主题,《SMT China表面组装技术》杂志社匠心打造...
  • 在没有CSS3之前,我们只能在网页上实现2D平面动画,但是随着CSS3技术的普及,我们可以很方便的在网页上实现一个3D立方体。今天给大家带来的便是一个基于jQuery和CSS3的3D立方体盒子,我们可以通过鼠标拖拽浏览盒子的...
  • 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就...
  • 火爆的VR/AR中虚拟内容也都是3D技术的表现。 就业机会和岗位招聘不断增加,不难发现3D化已经渗透到众多行业中。 美术0基础想快速入行游戏美术3d,首先,你要了解学习3D游戏美术设计需要哪些课程: 3D游戏美术设计是...
  • 本书使用Python的内置特征创建用于数据可视化和技术说明的创新图形。从构建绘图空间和生成2维和3维对象的基本Python函数开始,你将学习如何构造更复杂的对象、转换和旋转、删除隐藏线、引入阴影以添加真实感以及将...
  • 今年下半年, HTML5 和 WebGL 变成极热门词语,3D 网页来势汹汹。...这是一个转折时期——互联网最重要的门户浏览器正在从主流支持 2D 平面网页内容到原生的支持 3D 物体形象的展示。 何谓 WebGL ?WebGL...
  • 3d回顾

    2016-08-05 21:01:00
    手把手教你玩 CSS3 3D 技术 要玩css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2D...
  • 1、什么是Tangent space? Tangent space和world space,view space其实是同样的概念,均是代表三维坐标系。在这个坐标系中, X轴对应纹理坐标的U方向,沿着该轴纹理坐标U线性增大。...在normal map等技术中,存储...
  • 在上一篇上讲到了开发工具及包需要的包,下面让我们动手来实现一下第一个3D场景。 1、在eclipse中新建一个flex项目,添加...3、实现第一个3D场景,在场景中添加一个Panel平面,并让这个平面绕Z轴旋转,上代
  • 19.1 3d拾取技术 529 19.1.1 案例效果与基本原理 529 19.1.2 开发步骤 531 19.2 多点触控 537 19.2.1 案例效果与基本原理 537 19.2.2 开发步骤 538 19.3 多键监听 541 19.3.1 案例效果与基本...
  • 上一篇中,已经可以在flex网页中实现一个会自动旋转的平面,那能不能把2D平面的组件添加到3D平面呢,为这个问题,我查了很多资料,结果多样,却没有谁作一个系统的说明,在这里,我也不能作一个具体的解说(功力不够...

空空如也

空空如也

1 2 3 4 5
收藏数 94
精华内容 37
关键字:

平面转3d技术