css3之3D教程详解包含渐变旋转等transform属性

最近看了一个朋友的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: 从哪里开始

写的好!

微信扫一扫赏大洋