CSS3新技能get！打造立体几何产品展示效果，简单又炫酷

这些叫啥子东西？CSS3里的Perspective和TranslateZ。

快来学点新技能，让你的网页设计亮起来！学会使用CSS3的Taperpective和transform:translateZ两个超牛功能，立马就能做出真实好看的三维效果，炫酷漂亮得很！下面我们马上探讨如何运用这两招制作出惊人的立体几何或产品展示效果！

使用CSS3制作立方体

朋友们，学会怎么用地CSS3做个正方体超容易！以前这事儿感觉有点复杂，但是现在我们有了perspective和transform两大神器，玩起来就简单多！只需调整下旋转角度还有位置数值，无论你从哪个方向看，每个面都变幻万千哟~就好像从各种角度来欣赏这个立方体。

先搭个台子，加点透视效果。然后，就能用了。

让我们把那个立方体变成各种奇特形状！记住要给所有的面都加个transform-style: preserve-3d。然后再为每个面添加一些转动和移动Z轴的小效果就行了。最后别忘了调整一下动Z轴上的数字，你会发现这个立方体在你眼前瞬间变化多样~

    

        
1
        
6
        
4
        
3
        
5
        
2
    

商品展示效果应用

咱俩接下来干嘛呀？还得继续磨练！想要做一个炫酷的产品展示，先把照片和简介塞到两个P元素里头。接着一点，哇，神奇的事出现了，盒子开始转圈，商品介绍也随机变化，太有创意了！更棒的是，我们还可以给每款商品加上独特的特效，这样除了让它们变得神秘之外，还非常吸引人，简直就是眼前一亮！

每件货都得先包上盒子不然容易乱摇晃。加上那俩保留立体感的transform-style: preserve-3d跟稍微有点视觉效果的perspective属性，看上去超帅气也让人们看起来更舒心！

看这几招，教你轻松制作超炫立方体效果，不管是什么项目都适用。比如网上开店就很需要这种效果，能大大提高页面吸引力，再也不怕没人来光顾了！

总结与展望

 .wapper
        {
            margin: 100px auto 0;
            width: 100px;
            height: 100px;
            -webkit-perspective: 1200px;
            font-size: 50px;
            font-weight: bold;
            color: #fff;
        }
        .cube
        {
            position: relative;
            width: 100px;
            -webkit-transform: rotateX(-40deg) rotateY(32deg);
            -webkit-transform-style: preserve-3d;
        }
        .side
        {
            text-align: center;
            line-height: 100px;
            width: 100px;
            height: 100px;
            background: rgba(255, 99, 71, 0.6);
            border: 1px solid rgba(0, 0, 0, 0.5);
            position: absolute;
        }
        .front
        {
            -webkit-transform: translateZ(50px);
        }
        .top
        {
            -webkit-transform: rotateX(90deg) translateZ(50px);
        }
        .right
        {
            -webkit-transform: rotateY(90deg) translateZ(50px);
        }
        .left
        {
            -webkit-transform: rotateY(-90deg) translateZ(50px);
        }
        .bottom
        {
            -webkit-transform: rotateX(-90deg) translateZ(50px);
        }
        .back
        {
            -webkit-transform: rotateY(-180deg) translateZ(50px);
        }

看了这篇文章后，是不是觉得学CSS3好玩多！只需要一招小绝活——perspective和transform:translateZ，就可以轻松做出炫酷的3D视图效果。不论是做立体卡片还是现实生活中的购物车页面，保证你的网站既好看又实用！

科技变化飞快，网页设计也越来越酷炫！CSS3让我们的创意无限放大，千万别忽略最新技术潮流，否则就会落后于时代~

这几个简单的方法可以帮你提升空间感知和物体旋转技能。快来试试吧～

    
    
    
    



    

        

            
            
              Contact Form The easiest way to add a contact form to your shop.
            
        
    
    

        

            
            
              Contact Form The easiest way to add a contact form to your shop.
            
        
    
    

        

            
            
              Contact Form The easiest way to add a contact form to your shop.
            
        
    

。