CSS3 Perspective

一 、在元素的父元素上使用

在父元素上使用Perspective属性可以使用透视投影视图,在父元素上加上:

perspective:400px

表示相机距离屏幕位置为400px。默认相机对准父元素的中心,要重设相机的焦点可以使用:

perspective-origin: 30% 70% 50%

表示相机的焦点在x轴(距原点)30%,y轴70%,z轴50%处。

二、在元素上使用

在元素上使用perspective属性可以达到正交投影视图效果。在元素上加上:

transform: perspective(400px)

三、不使用perspective,用2D变换实现伪3D效果

在屏幕上所谓3D效果本质上还是2D效果,只不过这种2D效果通过消隐和明暗处理,投射到屏幕上,看起来像是真的有一个物体存在一样。

所以,对于一些简单的3D动画,只有有限的状态,其实可以使用2D的变换去实现,以减少编程的困难。

比如下面这种,点击后延切线方向旋转90度的效果:

这里写图片描述

demo

如果要3D来做,可以用perspective实现正交投影,然后用3D旋转来实现,遗憾的是,我一下午都没旋转正确。用2D实现起来就很简单,看代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/429974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在ASP.NET Core使用Middleware模拟Custom Error Page功能

一、使用场景 在传统的ASP.NET MVC中,我们可以使用HandleErrorAttribute特性来具体指定如何处理Action抛出的异常.只要某个Action设置了HandleErrorAttribute特性,那么默认的,当这个Action抛出了异常时MVC将会显示Error视图,该视图位于~/Views/Shared目录下。 自定义错误页面的…

状态模式案例分析

需求 初始状态下,【暂停按钮】不可点,所有数轴可调: 点击【动态波】后,【暂停按钮】可点,所有数轴可调: 点击【暂停按钮】后,“暂停”变为“播放”,所有数轴不可调: 分析需求 上面…

Linux系统IP地址

1、IP地址概述 2、配置IP地址 查看IP地址 在网卡上绑定一个IP地址 同一张网卡上绑定多个IP 绑定一块网卡设备 修改或删除IP地址 IP地址概述 这里不多赘述,参考《计算机网络》课程。 配置IP地址 [rootweekend110 ~]# ifconfigeth0    Link encap:Ethernet HWadd…

qwidget多个窗口同步_Linux命令screen—终端切换,工作环境保存,画面同步,防断网...

Screen基础Screen是一款由GNU计划开发的用于命令行终端切换的自由软件。用户可以通过该软件同时连接多个本地或远程的命令行会话,并在其间自由切换。GNU Screen可以看作是窗口管理器的命令行界面版本。它提供了统一的管理多个会话的界面和相应的功能。创建一个新的窗…

Snap svg:路径变换和相交计算

Snap.svg对原生的svg进行了封装,为svg的创建、操作提供了便捷的方法,但是官网的文档对一些概念没有解释,难免会造成困扰。比如说路径的旋转,就存在变换后得不到路径交点的问题。 用普通的变换得不到路径的相交点 Snap.svg提供了…

Linux文件基本操作

使用declare命令创建一个变量名为 tmp 的变量: 使用号赋值运算符为变量 tmp 赋值为 dunzhu: 读取变量的值,使用echo命令和$符号($符号用于表示引用一个变量的值,初学者经常会忘记输入) 在dunzhu家目录创建一…

Snap svg 主要对象

对象概述Elementsvg规定的元素,提供修改属性、绑定事件、操作数据、操作层级关系、动画等方面的方法,类似jquery选取的元素Fragment虚拟节点,其用处是可以用js创建多个元素,添加到Fragment,不会影响到实际的DOM&#x…

初中位似图形作图_[如何画位似图形] 位似图形的画法及步骤

如何画位似图形位似变换是新课程标准中涉及的一个重要知识点,它是图形变换的一种,实际上它是相似变换的一种特殊情形,存在位似中心———即对应顶点连线的交点.其位似比就是相似比.作为一个新的知识点,越来…

DES 加密 解密

EncryptUtil feiyangklDES 一行代码完成DES加密,加密模式 DES CBC DEMO GIF DEMO 简介 最近项目中用到DES加密,在这里整理成篇,供大家参考阅读,在使用该demo过程中,你可能会遇到一些问题,首先你需要看一下…

bootstrap带有下拉按钮的输入框_关于bootstrap--表单(下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio)...

html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。role的作用是描述一个非标准的tag的实际作用。…

CSS3 线性渐变背景的过渡效果

对于background-color,可以直接transition: background-color 2s就能实现过渡效果,但对于background:-webkit-radial-gradient(circle,#ffc71d 0,rgba(168,117,14,.5) 130%);就无能为力了。对于这种复杂的背景,只能给opacity添加过渡效果了&a…

markdown绘图插件----mermaid简介

作者:黄永刚 mermaid简介 当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样。 mermaid解决这个痛点,这是一个类似markdown语法的脚本语言…

华为三层交换机路由配置案例_华为三层交换机配置实例

1华为三层交换机配置实例一例服务器1双网卡,内网IP:,其它计算机通过其代理上网PORT1属于VLAN1PORT2属于VLAN2PORT3属于VLAN3VLAN1的机器可以正常上网配置VLAN2的计算机的网关为:配置VLAN3的计算机的网关为:即可实现VLAN间互联如果…

大学只待成追忆,只是工作已半年,2016再见

时光匆匆,真的不知不觉,已经毕业半年。这一年发生了好多事,回望简直难以相信。 再见广州,你好厦门 广深工作好找,但心就是想离开,当时想的是,找一个地方,让一切重新开始。来到厦门…

centos7挂载nas存储_CentOS7搭建NAS文件共享存储

概述:NFS是一种基于TCP/IP传输的网络文件系统协议,最初由SUN公司开发。通过NFS协议,客户机可以像访问本地目录一样访问远程服务器中的共享资源。NFS得到了如NAS等网络存储的设备极好支持。也是LVS共享存储的首选。环境:CentOS 7.8…

【移动端html5】 android video播放进度精确控制

android上视频播放存在的问题 在PC上播放html5视频,设置video.currentTime5,视频将跳到5s的位置,并且显示出第5s的画面。在安卓下,却存在下面两个问题: 在安卓上,为了省电,在暂停的时候,改变视…

柯理化

在JS中柯里化就是把一个需要传入多个参数的函数变成多个嵌套的只要传入一个参数的函数 在普通函数中的柯理化: var addfunction(x,y){ return xy; } 柯里化: var addCurringfunction(x){ return function(y){ return xy; } } addCurring(1)(2);//3 如果是…

Java NIO 教程

NIO 概述 NIO有三个核心组件: 通道(Channels)缓冲器(Buffers)选择器(Selectors) 实际上,NIO的组件和类远不止这三个,但这个三个组件是核心。至于其它组件,…

threejs相机和渲染器

渲染器 渲染器其实代表的是canvas标签。 渲染器的类型 WebGLRender 使用WebGL来渲染图形,速度较快,但是有些机器不支持WebGL。 CanvasRender 使用canvas2d来渲染图形,在较老的版本上,主要是用来渲染2D图形。现在这个渲染器在…

类的 三大特性 封装,继承,多态 overload与override的区别

OOP三大特性:封装,继承,多态 封装的目的:为了让类更安全封装的做法:1.类里面的成员变量做为private2.使用成员方法来间接访问成员变量3.在该方法里面加限制条件 php类里面不允许出现同名方法 继承 概念:子类…