Css3新特性应用之形状总结

时间：2017-04-09

a和d表示缩放且不能为0；c和b控制倾斜；e和f控制位移

translate(位移)：matrix(1,0,0,1,x,y)
scale(缩放)：matrix(x,0,0,y,0,0);
skew(倾斜)：matrix(1,tany,tanx,1,0,0)，由于输入的是deg（角度），需要将角度转换为弧度值
rotate(旋转)：matrix(cosN,sinN,-sinN,cosN,0,0)，角度转换为弧度

上述值的应用都与transform-origin的值有关系，他是定位元素旋转的原点，可以是top，bottom，center等，可以指定x,y,z三种坐标系

perpective:透视，不可以负数，0或百分比，只能是数值；

表示观察者到被观察物体的一段距离
透视距离与物体越远，物体就会显得越小
透视只能设置在变形元素的父级或祖先级，因为浏览器会为其子级的变形产生透视效果
在3d变换上没有倾斜(skew)这个属性。

六、简单的饼图

动画饼图，效果如下：

实现步骤如下：

画出一个yellowgreen的圆，并利用linear-gradient设置background-image的值，实现两种颜色各显示一半的功能：

然后加入一个伪元素，继承父级（真实元素）的背景色，然后用rotate旋转即可

要利用margin-left让其靠左
利用transform-origin设置其旋转定位点

动画展示代码如下：

@keyframes spin{
            to{ transform: rotate(.5turn); }
        }
        @keyframes bg{
            50%{ background-color: #655; }
        }
        .wrap{
            width: 100px; height: 100px;
            border-radius: 50%;
            background: yellowgreen;
            background-image: linear-gradient(to right, transparent 50%, #655 0); 
        } 
        .wrap::before{
            content: '';
            display: block;
            margin-left: 50%;
            background-color: inherit;
            height: 100%; 
            border-radius: 0 100% 100% 0 / 50%;
            transform-origin: left;
            animation:spin 3s linear infinite,
                bg 6s step-end infinite;
        }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

共2页:

2/2下一篇

上一篇：CSS布局奇淫技巧之--各种居中总结 下一篇：CSS3 Notes: -webkit-box-reflect实现倒影的实例

Css3新特性应用之形状总结

相关文章

最新文章