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,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...
随机推荐
- Python 学习杂项
#print("Hello World!") #name = "nihfjkds" age = 454 num1 = 1 num2 = 2 #print(nam ...
- csps模拟92数列,数对,最小距离题解
题面:https://www.cnblogs.com/Juve/articles/11767225.html 数列: 简化题意:已知a,b,c,求满足$a*x+b*y=c$的$x+y$最小值 然后ex ...
- 0916CSP-S模拟测试赛后总结
40分-rank35. 不想找借口.实力不行. 赛时状态没出什么大问题.就是实力太弱了. 天皇又AK了.去问了一下,他说全是简单题…… 后来发现一些人用非正解AC了. 但是天皇题题正解题题首切啊. 还 ...
- 修改docker+jenkins挂载目录
1.停止docker [root@jenkins data]# systemctl stop docker 2.创建目录,拷贝数据 [root@jenkins data]# mkdir -p /new ...
- python相关软件安装流程图解——虚拟机操作——复制虚拟机主机——CentOS-7-x86_64-DVD-1810
请先确保已经安装了虚拟机 python相关软件安装流程图解——虚拟机安装——CentOS-7-x86_64-DVD-1810——CentOS-01下载 https://www.cnblogs.com/ ...
- SpringCloud网关无法加载权限及IP黑名单白名单
启动springcloud服务注册中心base,再启动网关远程调用base的接口读取权限等数据,控制台出现加载null权限ERROR提示.在远程调用处打断点,先进入代理,找到抛出异常的原因是reque ...
- error C2712: Cannot use __try in functions that require object unwinding
转自VC错误:http://www.vcerror.com/?p=52 问题描述: error C2712: Cannot use __try in functions that require ob ...
- python基于SMTP发送邮件
import smtplib from email.header import Header from email.mime.text import MIMEText ''' SMTP是发送邮件的协议 ...
- Ubuntu下搭建Pixhawk开发环境
安装提示 需要网络环境,不然下载会很慢. 工具安装 1. 权限设置 sudo usermod -a -G dialout $USER 代码输入可以拷贝,但是不可以用快捷键. 需要输入密码,输入密码无显 ...
- 1.关于Python的发展历史你知道吗?
1989,为了度过圣诞假期,Guido开始编写Python语言编译器.Python这个名字来自Guido的喜爱的电视连续剧<蒙蒂蟒蛇的飞行马戏团>.他希望新的语言Python能够满足他在C ...