最近看了一个朋友的h5 发现一些简单的方形3d效果都是用的图片，就想研究下用css3写出来下

总共用到的属性就是4个

1背景渐变，要实现好一点的3d投影效果，渐变是必不可少的

background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));

2旋转属性,包括各个角度的切换和视角的调整就必须得用到这三个属性了！

transform:rotateX(0-360deg)
transform:rotateY( angle )
transform:rotateZ( angle )

3舞台属性3D 元素距视图，

简单来说就是前面有一个苹果！加入我们隔着1米看还是看得清的，隔着十米看，那么就很小了，而且我们的视角也变大了，看到的范围更加广了！

perspective: 4000px;

4和3搭配的视角位置，就是我们眼睛的中心点在哪个位置，下面属性就是我们是盯着中心看的！

perspective-origin: 50% 50%;

砍柴不误磨刀功

接下来我们来分解4个元素

1、渐变属性

  background-image: -webkit-linear-gradient(top,#000 0%,red 100%);

解析下，就是

background-image:不多说了

-webkit-linear-gradient:谷歌内容的兼容，下面会有兼容全部的Less放送

top: 就是顶部开始，从顶部到底部 

• 可选参考属性left,bottom,right

• 可选2：left top 左上角开始，左下角开始left bottom

#000 0%,这个可以无限增加，默认最少为2个，比如

• #000 0%,#333,20%,red,100%;

          <style type="text/css">
            .sanjiao1 {
                width: 100%;
                color: #fff;
                height: 200px;
                background: #000;
                transform: rotateY(0);
                transform-origin: left top;
                background-image: -webkit-linear-gradient(left bottom, #000 0, red 100%);
            }
            </style>
            <div class="sanjiao1">
            </div>

提供1份less的渐变兼容设置吧！这足够日常的使用了

.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
    background-color: @default;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
    background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
    background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}

使用方法
.linear-gradient-top(#666,#000,0%,red,#100) 

@default :默认的背景色

@color1：第一份属性开始的颜色

@stop1: 从哪里开始