css3的3D变形
一、坐标系
1、是我们熟悉的右手坐标系:伸出右手,让拇指和食指成L形,大拇指向为右,食指向上,中指指向前方,这样,拇指、食指、中指的指向分别是X、Y、Z轴的正方向。
2、是我们CSS3中的3D坐标:伸出左手,让食指和拇指成L形,大拇指指向右,食指向上,中指指向内侧,这样,拇指、食指、中指的指向分别是X、Y、Z轴的正方向。
二、透视
一般会加到父元素或者是body上
perspective:100px;
视距:眼睛到屏幕的距离:视距越大,透视效果越明显,相反则越不明显
三、背面是否可见
backface-visibility:hidden;背面不可见,则我们会看到这个元素下层的元素或者背景。
css3的3D变形的更多相关文章
- CSS3过渡、变形和动画
1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: n ...
- CSS3 过渡、变形和动画
一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...
- css3 3D变形 入门(一)
css3 3D.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 0 ...
- CSS3——2D变形和3D变形
2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...
- 9.css3动画-2D/3D变形--trasform
transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- 3D变形旋转
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- 用CSS3做3D动画的那些事
年会做了个3D变换的抽奖系统,在这里分享下通过CSS3制作3D效果的心得.抽奖系统虽然够炫酷,可惜抽的时候出了点bug,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...
随机推荐
- Excel宏开发之合并单元格
合并单元格 Sub 宏1() ' ' 宏1 宏 ' ' 快捷键: Ctrl+q ' Application.Goto Reference:="宏1" Application.VBE ...
- CSS——优雅降级和渐进增强
什么是渐进增强(progressive enhancement).优雅降级(graceful degradation)呢? 渐进增强 progressive enhancement: 针对低版本浏览器 ...
- 0921CSP-S模拟测试赛后总结
倒数第一祭. 感觉T3数据范围50可以qj一下.于是押了T3. 然后两个小时调我4.1k的bfs.最后调出来了发现策略错了.十分绝望. T120分吊住了.十分难过.倒数第一了.还是实力不行. 不应该押 ...
- 杂项-Maven-jna:JNA(Java Native Access)
ylbtech-杂项-Maven-jna:JNA(Java Native Access) JNA(Java Native Access )提供一组Java工具类用于在运行期间动态访问系统本地库(nat ...
- 【题解】洛谷 P1061 Jam的计数法
#include <iostream> #include <cstring> #include <cstdio> using namespace std; int ...
- 最全的机器学习&深度学习入门视频课程集
资源介绍 链接:http://pan.baidu.com/s/1kV6nWJP 密码:ryfd 链接:http://pan.baidu.com/s/1dEZWlP3 密码:y82m 更多资源 ...
- Python 实现快速排序和随机快速排序
直接上代码: #快速排序 #coding: utf-8 def quicksort(a,left,right): if(left<right): mid = partition(a,left,r ...
- niginx相关命令及代理配置
安装 in mac https://www.cnblogs.com/meng1314-shuai/p/8335140.html Nginx相关命令 mac下启动: 通过brew 安装install 后 ...
- 操作系统-Windows操作系统的线程调度了解这些
Windows操作系统支持内核级线程,调度单位是线程,它采用基于动态优先级的,抢占式调度,并结合时间配额的调整来完成调度 一.几个前提知识点 就绪线程按优先级进入相应的就绪队列 系统总是选择优先级最高 ...
- git push到多个不同的远程仓库
1.若现在本地有一个已经和github远程仓库关联好的本地仓库,平时都会将本地仓库push到github上. 2.有一天突然发现"码云"这个远程仓库网站,咦!这个还可以创建priv ...