每日学习总结--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来让元素下移。这里还要改进

CSS3 2D转换&3D转换

1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 10...
  • zhaobw831
  • zhaobw831
  • 2016年01月17日 19:56
  • 2498

html css学习笔记-2d 3d动画的转换

div{ width: 100px; height: 100px; background-color: green; ...
  • PZ0605
  • PZ0605
  • 2015年05月16日 20:29
  • 711

Unity5学习心得-2D

Unity5学习心得-2D
  • fyyzwsws
  • fyyzwsws
  • 2016年07月14日 11:19
  • 1255

3D和2D游戏开发技术里的坐标系总结

from:http://www.liketocode.com/coding/208.htm最近在做unity3d开发,坐标系的概念把自己搞得好迷糊,发现理解好坐标系的东西的确对一个新手来说是必经之路,...
  • shencaifeixia1
  • shencaifeixia1
  • 2015年01月16日 17:52
  • 3791

HTML5学习笔记—CSS3 transform转换属性(2D/3Dtransform方法)

transform方法 table{ border:3px solid yellow; border-collapse:collapse; } td,th{ border:1px solid pin...
  • ccnanxi
  • ccnanxi
  • 2017年01月03日 16:00
  • 538

Unity3D教程:将3D坐标转成2D坐标的方法

Unity3D教程:将3D坐标转成2D坐标的方法。3D坐标在Unity中称作World Space,2D坐标称作Screen Space, 是以pixel为基准,以iPad 1024 x 768(4:...
  • miaoweiye
  • miaoweiye
  • 2013年04月15日 10:07
  • 954

CSS3 2 2D 3D转换

CSS3 2 2D 3D转换   通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 转换是使元素改变形状、尺寸和位置的一种效果,使用 2D 或 3D 转换来转换元素。   1浏...
  • wulinbanxia
  • wulinbanxia
  • 2017年06月22日 00:12
  • 242

Unity 3d转2d再转3d

我是用daydream平台测试的,目前别的平台还没有测试 大概思路是playerSettings 中设置勾选Virtual Reality Supported 后选着对应的平台这里选的是Daydre...
  • unity_http
  • unity_http
  • 2017年12月20日 17:42
  • 202

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

前段时间开始看一些实战开发的内容和教程。一些是来自于麦子学院的视频,一些来自于蛮牛教育,还有一部分官方教学视频。最终选择试着跟着官方的教程,尝试敲一次这个叫做拾荒者的官方示例。 过程中遇到了许多之前不...
  • axlxzero
  • axlxzero
  • 2016年07月11日 14:12
  • 1474

unity开发状态下2d与3d模式的转换

在Unity中,2D和3D只是一种视角上的转换,所有的物体都是有3D坐标信息的,在Vector3转为Vector2,并且视图方式由透视变为正交的时候,Z轴信息就没有意义了,也就从3D变为了2D。2D模...
  • qq_36215025
  • qq_36215025
  • 2017年01月28日 16:05
  • 2197
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:每日学习总结--2D/3D转换
举报原因:
原因补充:

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