关闭

每日学习总结--2D/3D转换

70人阅读 评论(0) 收藏 举报
分类:

        刚踏上前端路的新手每日学习知识点回顾

        今天学习了css3中transform属性实现2D/3D转换。  通过transform属性可以使元素改变形状、尺寸、位移。

 有下列方法可以操控元素:

translate(X,Y) 方法         设置括号中X,Y的值可以对应的改变元素X轴和Y轴方向的坐标

rotate()方法                    使元素按照顺时针方向旋转。允许负值 ,负值则逆时针旋转。

scale(val1,val2)方法       改变元素的尺寸,val1,val2分别改变元素X轴和Y轴方向的尺寸。

skew()方法                      未深入了解


下面是我尝试运用transform和animation写的一个动画效果

<html>
<head>
<title></title>
<style>
         .div1{
          width:0;
          height:0;
          background:#910;
          position:relative;
          animation-name:change;
          animation-duration:1s;
          animation-iteration-count:1;
          animation-timing-function:linear;
          animation-fill-mode:forwards;
         }
         @keyframes change{
          0%{width:0;height:0;}
          20%{width:10px;height:1px;transform:rotate(60deg);transform::translateX(10px);top:10px;}
          40%{width:60px;height:2px;transform:rotate(120deg);transform::translate(30px);top:30px;}
          60%{width:120px;height:3px;transform:rotate(180deg);transform::translateX(60px);top:60px;}
          80%{width:160px;height:4px;transform:rotate(270deg);transform::translateX(80px);top:80px;}
          100%{width:200px;height:5px;transform:rotate(2970deg);transform::translateX(100px);top:100px;}
         }
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

貌似translate()部分没写好,所以用top来让元素下移。这里还要改进

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:135次
    • 积分:20
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档