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

原创 2015年11月17日 20:24:18

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

        今天学习了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来让元素下移。这里还要改进

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

obj2opengl:转换OBJ 3D模型到iPhone OpenGL ES兼容的数组中

原文如下:obj2opengl: convert obj 3D models to arrays compatible with iPhone OpenGL ES obj2opengl在GitHub...

obj2opengl:转换OBJ 3D模型到iPhone OpenGL ES兼容的数组中

原文如下:obj2opengl: convert obj 3D models to arrays compatible with iPhone OpenGL ES obj2opengl在GitHub...

Unity3D+kinect2 实现关节位置到UGUI坐标的转换,以及判断是否在某个UGUI中

基本思路是: 1、先判断是否检测到玩家 2、是否检测到对应玩家的对应关节点 3、该关节点的左边转换为当前UGUI坐标 4、判断该坐标与按钮或者某个图片是否有重合 这里有个水果忍者游戏的开始界面中,...
  • sindw
  • sindw
  • 2017-07-30 17:55
  • 174

2Dto3D视频转换技术

一、立体实景拍摄。     此方法利用多镜头实景拍摄,以红蓝视觉偏差的影像方式出现在屏幕上,观看时必须佩带红蓝眼镜。或通过多镜头合成技术使其在3D立体电视上裸眼观看立体视频。     优点...

Unity3D基础篇----Shader学习笔记(2)

这一篇我们会学习中更为立体的Shader,即通过光照计算物体表面的漫反色,通过兰伯特光照原理实现逐顶点以及逐像素漫反色。

Unity3D学习记录——GUIText2

1.用GUIText组件实现倒计时显示 2.创建空物体,添加GUIText组件,属性自由调节,然后添加脚本 using System.Collections; using System.Collect...

unity3D学习笔记2

接着看视频 = = 学习内容:用代码创建一个圆环 由36个方体组成   2.方体环绕飞行 3. 原件(长方体)自转 代码如下: private GameObject louti; priv...

Unity3D学习笔记(2)——用GUI制作井字棋游戏

本来拿gui来做游戏蛮怪的,但这却是一个熟悉gui的不错的途径。今天我就学着使用GUI.Button做了一个十分简单的井字棋游戏。上个成品图:   首先创建一个C#脚本文件,去掉Update方法...

我的Direct3D之路2:学习第一个三角形绘制程序以及一些注意点

打开你\Samples\C++\Direct3D\Tutorials\Tut02_Vertices路径下的工程,这就是微软给的官方绘图教程。 一、窗口主程序 程序有点乱,先看窗口主程序 INT...

我的Unity3D学习日记-05(官方实例2Droguelike)

前段时间开始看一些实战开发的内容和教程。一些是来自于麦子学院的视频,一些来自于蛮牛教育,还有一部分官方教学视频。最终选择试着跟着官方的教程,尝试敲一次这个叫做拾荒者的官方示例。 过程中遇到了许多之前不...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)