学习CSS3 3D转换,制作一个3D立方体

       要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果。不过有很多需要注意的地方,这里把我学习的方法,过程分享给大家。再讲知识点之前,还是先弄清楚3D的坐标系吧,从网上搜了一张经典坐标系图,供大家回顾一下。

学习CSS3 3D转换,制作一个3D立方体_第1张图片

1. 3D视图

       transform-style:flat(默认,二维效果)/preserve-3d(三维效果)。设置一个元素的transform-style:preserve-3d;只影响这个元素的子元素(如果孙元素也需要有3d效果,则需要给该元素的父元素设置preserve-3d)。这样所有的子元素都可以相对于父元素进行3d转换操作。和二维变化一样,三维变化使用transform属性来设置。下面列举几个常用的函数:

  translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;

  scale3d(number,number,number) 使元素在这三个纬度中缩放,也可分开写,如:scaleX(),scaleY(),scaleY()

  rotateX(angle) 是元素依照x轴旋转;

  rotateY(angle) 是元素依照y轴旋转;

  rotateZ(angle) 是元素依照z轴旋转。

2. 透视效果

       perspective(length)为设置三维透视的距离。仅作用于元素的后代,而不是元素本身。当perspective:none;perspective:0;时,相当于没有设置perspective(length)

       加入要创建一个小立方体,长宽高都是200px,如果perspective的属性值小于200px,那么就相当于站在盒子里面看结果,如果perspective的属性值非常大,那就是站在非常远的地方看。

       当元素没有设置perspective时,所有后代被压缩在二维平面上,不存在透视效果。如果设置了perspective,将会看到三维效果。默认的透视视角中心是在容器的中点(注意是设置perspective的元素中点,不是他的后代元素),也就是perspective-origin:50% 50%;,也可以自己设置,比如:perspective-origin:0% 0%;,则是将视角定在左上角。

       下面是几张效果图,创建了一个长宽高都是200px的立方体,三维中点(0,0,0)在立方体的中心,效果如下:

学习CSS3 3D转换,制作一个3D立方体_第2张图片

当不设置perspective,也没有动画的初始画面,效果如下:

学习CSS3 3D转换,制作一个3D立方体_第3张图片

可以看到我们根本不知道他是一个立方体,除非他像上面那样动一下。

当加上perspective属性时:

学习CSS3 3D转换,制作一个3D立方体_第4张图片

当perspective小于100px时(因为三维中点在立方体中心,所以相当于立方体在Z轴上的高度只有100px),可以看出是相当于在立方体里面看结果:

学习CSS3 3D转换,制作一个3D立方体_第5张图片

注意:
       (1)如果一个元素绕x轴或者y轴旋转90度以上的话,他的背面将面向用户。背面的元素始终是透明的,所以用户能在后面看到正面的反向形态。如果不想让从背面看到正面的话,可以设置backface-visibilityhidden,那么这个元素在背面时是不可见的。比如说做扑克牌时是不希望在背面看到的。如果一个元素的背面是可见的,旋转时他将掩盖他下面的元素,而不是露出他下面的元素。

       (2)如果父元素设置了overflow:hidden;那么子元素就无法跳出父元素的平面,即z轴的效果都将无法显示,相当于transform-style:flat;

下面是我写的代码,分享一下,如有不足请指正,谢谢!


<html>
<head>
    <title>Hellotitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            position: relative;
            height: 400px;
            width:80%;
            margin-left: 10%;
            transform-style: preserve-3d;
            animation: test1 8s ease infinite;
        }
        .box{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -100px;
            width:200px;
            height: 200px;
            color: #FFFFFF;
            font-size: 30px;
            font-weight: 700;
            line-height: 200px;
            text-align: center;
            opacity: 0.8;
        }
        .box1{
            background: #2b669a;
            transform: rotateY(90deg) translateZ(-100px);
        }
        .box2{
            background: #509a64;
            transform: rotateY(90deg) translateZ(100px);
        }
        .box3{
            background: #9a5468;
            transform: rotateX(90deg) translateZ(-100px);
        }
        .box4{
            background: #979a25;
            transform: rotateX(90deg) translateZ(100px);
        }
        .box5{
            background: #97709a;
            transform: translateZ(-100px);
        }
        .box6{
            background: #589a25;
            transform: translateZ(100px);
        }
        @keyframes test1 {
            0%{
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
    style>
head>
<body>
<div class="parent animation" id="css3d">
    <div class="box box1">1div>
    <div class="box box2">2div>
    <div class="box box3">3div>
    <div class="box box4">4div>
    <div class="box box5">5div>
    <div class="box box6">6div>
div>
body>
html>

你可能感兴趣的:(web前端,CSS)