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

来源：互联网发布：wamp5 无法启动apache 编辑：程序博客网时间：2024/05/22 03:47

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

今天学习了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