3D旋转

短命女 2021-12-23 06:21 350阅读 0赞

在我们平时看到的网页中,有很多效果都是有3D特效的,今天就做一个简单的立方体.

效果图是这样的:

![1567645-20190528010300441-155820918.gif][]

主要分为外部盒子和内部盒子两个盒子,每一个盒子都是由六个div组成,,通过绝对定位使六个div在一起,再通过旋转角度以及向坐标轴拉伸形成一个盒子,内部盒子只是拉伸的长度小.

当鼠标悬停的时候,将外部盒子的拉伸长度加长,形成了一种鼠标悬停爆开的效果.

HTML部分:

1 <div class="wrap">
     2     <div class="cube">
     3         <div class="front"></div>
     4         <div class="back"></div>
     5         <div class="right"></div>
     6         <div class="left"></div>
     7         <div class="top"></div>
     8         <div class="bottom"></div>
     9         
    10         <i class="i-front"></i>
    11         <i class="i-back"></i>
    12         <i class="i-right"></i>
    13         <i class="i-left"></i>
    14         <i class="i-top"></i>
    15         <i class="i-bottom"></i>
    16     </div>
    17 </div>

css部分:

1 body{
      2     margin: 0;
      3     background-color: #eee;
      4 }
      5 
      6 .wrap{
      7     height: 200px;
      8     margin-top: 150px;
      9     perspective: 1000px;
     10 }
     11 
     12 .wrap .cube{
     13     position: relative;
     14     width: 200px;
     15     height: 200px;
     16     margin: 0 auto;
     17     transform-style: preserve-3d;
     18     transform: rotateX(0deg) rotateY(0deg);
     19     
     20     animation: rot 20s linear infinite;
     21 }
     22 /*外部大盒子*/
     23 .wrap .cube div{
     24     position: absolute;
     25     top: 0;
     26     left: 0;
     27     width: 100%;
     28     height: 100%;
     29     transition: transform 0.6s ease-in;
     30 }
     31 
     32 .wrap .cube .front{
     33     background-image: url(../img/1.jpg);
     34     background-size: contain;
     35     transform: translateZ(100px);
     36 }
     37 .wrap .cube .back{
     38     background-image: url(../img/2.jpg);
     39     background-size: contain;
     40     transform: rotateY(180deg) translateZ(100px);
     41 }
     42 .wrap .cube .right{
     43     background-image: url(../img/3.jpg);
     44     background-size: contain;
     45     transform: rotateY(90deg) translateZ(100px);
     46 }
     47 .wrap .cube .left{
     48     background-image: url(../img/4.jpg);
     49     background-size: contain;
     50     transform: rotateY(-90deg) translateZ(100px);
     51 }
     52 .wrap .cube .top{
     53     background-image: url(../img/5.jpeg);
     54     background-size: contain;
     55     transform: rotateX(90deg) translateZ(100px);
     56 }
     57 .wrap .cube .bottom{
     58     background-image: url(../img/6.jpeg);
     59     background-size: contain;
     60     transform: rotateX(-90deg) translateZ(100px);
     61 }
     62 
     63 
     64 
     65 
     66 /*内部盒子*/
     67 .wrap .cube i{
     68     position: absolute;
     69     top: 50%;
     70     left: 50%;
     71     margin-top: -50px;
     72     margin-left: -50px;
     73     width: 100px;
     74     height: 100px;
     75 }
     76 
     77 .wrap .cube .i-front{
     78     background-image: url(../img/center.jpeg);
     79     background-size: contain;
     80     transform: translateZ(50px);
     81 }
     82 .wrap .cube .i-back{
     83     background-image: url(../img/center.jpeg);
     84     background-size: contain;
     85     transform: rotateY(180deg) translateZ(-50px);
     86 }
     87 .wrap .cube .i-right{
     88     background-image: url(../img/center.jpeg);
     89     background-size: contain;
     90     transform: rotateY(90deg) translateZ(50px);
     91 }
     92 .wrap .cube .i-left{
     93     background-image: url(../img/center.jpeg);
     94     background-size: contain;
     95     transform: rotateY(-90deg) translateZ(50px);
     96 }
     97 .wrap .cube .i-top{
     98     background-image: url(../img/center.jpeg);
     99     background-size: contain;
    100     transform: rotateX(90deg) translateZ(50px);
    101 }
    102 .wrap .cube .i-bottom{
    103     background-image: url(../img/center.jpeg);
    104     background-size: contain;
    105     transform: rotateX(-90deg) translateZ(50px);
    106 }
    107 
    108 /*伪类*/
    109 .wrap .cube:hover .front{
    110     transform: translateZ(200px);
    111 }
    112 .wrap .cube:hover .back{
    113     transform: rotateY(180deg) translateZ(200px);
    114 }
    115 .wrap .cube:hover .right{
    116     transform: rotateY(90deg) translateZ(200px);
    117 }
    118 .wrap .cube:hover .left{
    119     transform: rotateY(-90deg) translateZ(200px);
    120 }
    121 .wrap .cube:hover .top{
    122     transform: rotateX(90deg) translateZ(200px);
    123 }
    124 .wrap .cube:hover .bottom{
    125     transform: rotateX(-90deg) translateZ(200px);
    126 }
    127 
    128 @keyframes rot{
    129     from{transform: rotateX(0deg) rotateY(0deg);}
    130     to{transform: rotateX(360deg) rotateY(360deg);}
    131 }

转载于:https://www.cnblogs.com/fei-H/p/10934741.html

[1567645-20190528010300441-155820918.gif]: /images/20211223/49a9b6507be64e3f900228e4660a1962.png