transform | 易学教程

ANIMATION经典小车动画

阅读更多关于 ANIMATION经典小车动画

适用于多个活动场景 1.HTML <body> <div class="old-driver"> <div class="box-false"> <div class="box"> <img class="car" src="car.png"> <img class="gas" src="gas.png"> </div> </div> </div> </body> 2.CSS <style type="text/css" media="screen"> .old-driver { width: 100%; height: 350px; position: relative; overflow: hidden; } @keyframes an-shake { 0%, 100% { transform: translate(1px, 0px) rotate(0deg) } 20% { transform: translate(-2px, -2px) rotate(0.2deg) } 40% { transform: translate(-2px, 1px) rotate(-0.1deg) } 60% { transform: translate(-1px, 2px) rotate(-0.2deg) } 80% { transform: translate(0px, 2px)

CSS 动画(CSS3) animation

阅读更多关于 CSS 动画(CSS3) animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式： animation:动画名称动画时间运动曲线何时开始播放次数是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% } animation-iteration-count:infinite; 无限循环播放 animation-play-state:paused; 暂停动画" 小汽车案例 body { background: white; } img { width: 200px; } .animation { animation-name: goback; animation-duration: 5s; animation-timing-function: ease; animation-iteration-count: infinite; } @keyframes goback { 0%{} 49%{ transform: translateX(1000px); } 55%{ transform: translateX(1000px) rotateY(180deg); } 95%{ transform: translateX(0)

祖先元素transform非none时在Iphone6上引起后代fixed/absolute元素的怪异表现及解决方案

阅读更多关于祖先元素transform非none时在Iphone6上引起后代fixed/absolute元素的怪异表现及解决方案

如题，祖先元素 transform 非 none 时，记录一下 Iphone6 中引起后代元素 fixed 参考视图怪异表现和解决方案。层叠关系及参考视图层叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸， HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。文档中的层叠上下文由满足以下任意一个条件的元素形成：根元素 ( HTML ), z-index 值不为 " auto "的绝对/相对定位，一个 z-index 值不为 "auto"的 flex 项目 ( flex item )，即：父元素 display: flex|inline-flex ， opacity 属性值小于 1 的元素， transform 属性值不为 " none "的元素， mix-blend-mode 属性值不为 " normal "的元素， filter 值不为“ none ”的元素， perspective 值不为“ none ”的元素， isolation 属性被设置为 " isolate "的元素， position: fixed 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考这篇文章） -webkit-overflow-scrolling 属性被设置

用HTML+CSS3写一个会旋转的魔方

阅读更多关于用HTML+CSS3写一个会旋转的魔方

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .box { width: 300px; height: 300px; margin: 150px auto; position: relative; transform-style: preserve-3d; animation: rotate 10s linear infinite alternate; } .before, .back, .top, .bottom, .left, .right { width: 300px; height: 300px; position: absolute; } .before { transform: translateZ(150px); } .back { /* transform: rotateY(180deg) translateZ(150px); */ transform:

移动端比1px还小的border

阅读更多关于移动端比1px还小的border

巧用border 在移动端经常出现border,细边框但有的时候产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border 下面是代码希望对大家有所帮助 .thinner-border { position: relative; width: 1px; margin:14px 0; height: 20px; } .thinner-border:after { content: ''; position: absolute; width: 500%; height: 500%; border: 1px solid #ffd000; transform-origin: 0 0; transform: scale(0.2, 0.2); box-sizing: border-box; } 来源： https://www.cnblogs.com/10manongit/p/12216074.html

大话设计模式，结构型模式之装饰器模式

阅读更多关于大话设计模式，结构型模式之装饰器模式

结构型模式概述结构型模式概述装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。我们通过下面的实例来演示装饰器模式的用法。其中，我们将把一个形状装饰上不同的颜色，同时又不改变形状类。模式动机及定义模式动机一般有两种方式可以实现给一个类或对象增加行为：继承机制，使用继承机制是给现有类添加功能的一种有效途径，通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法。但是这种方法是静态的，用户不能控制增加行为的方式和时机。关联机制，即将一个类的对象嵌入另一个对象中，由另一个对象来决定是否调用嵌入对象的行为以便扩展自己的行为，我们称这个嵌入的对象为装饰器(Decorator)。装饰模式以对客户透明的方式动态地给一个对象附加上更多的责任，换言之，客户端并不会觉得对象在装饰前和装饰后有什么不同。装饰模式可以在不需要创造更多子类的情况下，将对象的功能加以扩展。这就是装饰模式的模式动机。模式定义装饰模式(Decorator Pattern) ：动态地给一个对象增加一些额外的职责(Responsibility)，就增加对象功能来说，装饰模式比生成子类实现更为灵活

unity拖拽物体

阅读更多关于 unity拖拽物体

Vector3 MyScreenPointToWorldPoint(Vector3 ScreenPoint, Transform target) { 　　 //得到物体在主相机的某个方向　　Vector3 dir = (target.position - Camera.main.transform.position); 　　//计算投影　　Vector3 norVec = Vector3.Project(dir, Camera.main.transform.forward); 　　return Camera.main.ViewportToWorldPoint( 　　　　new Vector3( 　　　　　　ScreenPoint.x/Screen.width, 　　　　　　ScreenPoint.y/Screen.height, 　　　　　　norVec.magnitude 　　　　) 　　); } 　　Vector3 startPos;　　　　Vector3 endPos; 　　Vector3 offset; private void OnMouseDown() { 　　startPos = MyScreenPointToWorldPoint(Input.mousePosition, transform); } private void OnMouseDrag() { 　

手把手教你玩转 CSS3 3D 技术

阅读更多关于手把手教你玩转 CSS3 3D 技术

css3的3d起步要玩转css3的3d，就必须了解几个词汇，便是透视( perspective )、旋转( rotate )和移动( translate )。透视即是以现实的视角来看屏幕上的2D事物，从而展现3D的效果。旋转则不再是2D平面上的旋转，而是三维坐标系的旋转，就包括X轴，Y轴，Z轴旋转。平移同理。当然用理论来说明，估计你还不明白。下面是3个gif：沿着X轴旋转沿着Y轴旋转沿着Z轴旋转旋转应该没问题了，那理解平移起来就比较容易了，就是在在X轴、Y轴、z轴移动。你可能会说透视比较不好理解，下面我介绍一下透视的几个属性。 perspective perspective 英文名便是透视，没有这东西就没办法形成3D效果，但是这个东西是怎么让我们浏览器形成3D 效果的呢，可以看下面这张图，其实学过绘画的应该知道透视关系，而这里就是这个道理。但是在css里它是有数值的，例如 perspective: 1000px 这个代表什么呢？我们可以这样理解，如果我们直接眼睛靠着物体看，物体就超大占满我们的视线，我们离它距离越来越大，它在变小，立体感也就出来了是不是，其实这个数值构造了一个我们眼睛离屏幕的距离，也就构造了一个虚拟3D假象。 perspective-origin 由上面我们了解了 perspective ，而加上了这个 origin 是什么

Fastest available algorithm for distance transform

阅读更多关于 Fastest available algorithm for distance transform

问题 I am looking for the fastest available algorithm for distance transform. According to this site http://homepages.inf.ed.ac.uk/rbf/HIPR2/distance.htm, it describes: "The distance transform can be calculated much more efficiently using clever algorithms in only two passes (e.g. Rosenfeld and Pfaltz 1968)." Searching around, I found: "Rosenfeld, A and Pfaltz, J L. 1968. Distance Functions on Digital Pictures. Pattern Recognition, 1, 33-61." But I believe we should have a better and faster

Fastest available algorithm for distance transform

阅读更多关于 Fastest available algorithm for distance transform

订阅 transform