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,好几百人啊我的小心脏啊.虽然这个锅后面甩给会场的老爷电脑了(手动白眼). 首先介 ...
随机推荐
- JVM中堆栈
1.JVM是基于堆栈的虚拟机.JVM为每个新创建的线程都分配一个堆栈.也就是说,对于一个Java程序来说,它的运行就是通过对堆栈的操作来完成的.堆栈以帧为单位保存线程的状态.JVM对堆栈只进行两种操作 ...
- Redis-GEO
一. Redis的GEO特性 Redis3.2版本提供了GEO功能,支持存储地理位置信息用来实现诸如摇一摇,附近位置这类依赖于地理位置信息的功能.二. 命令2.1 增加地理位置信息 命令:geoadd ...
- CSS表格属性
border-collapse:表格边框线合并,取值:collapse.
- range()函数在python3与python2中的区别
range()函数在python3与python2中的区别 - CSDN博客 https://blog.csdn.net/weixin_37579123/article/details/8098038 ...
- java读写属性配置文件
package readproperties; import java.io.FileInputStream; import java.io.IOException; import java.io.I ...
- java-day06
面向过程 每一个具体的步骤都亲力亲为,详细处理每一个细节 面向对象 不关心具体步骤,而是找一个已经具有该功能的人来帮我做事 特点 封装性 继承性 多态性 类 是一组相关属性和行为的集合 成员变量(属性 ...
- Java开发系列-Cookie与Session会话技术
概述 会话技术:当用户打开浏览器的时候,访问不同的资源,直到用户将浏览器关闭,可以认为这是一次会话.会话技术产生是由于Http请求是一个无状态的协议,它不会记录上次访问的内容,用户在访过程中难免产生一 ...
- 多项式模板&题目整理
注:多项式的题目,数组应开:N的最近2的整数次幂的4倍. 多项式乘法 FFT模板 时间复杂度\(O(n\log n)\). 模板: void FFT(Z *a,int x,int K){ static ...
- Ubuntu下安装和配置Apache2,小编觉得挺不错的,现在就分享给大家
本篇文章主要介绍了详解Ubuntu下安装和配置Apache2,小编觉得挺不错的,现在就分享给大家,也给大家做个参考.有兴趣的朋友可以了解一下.(http://xz.8682222.com) 在Ubun ...
- logger----->模块级别的函数
#_author:star#date:2019/11/6#logger----->模块级别的函数#文件与屏幕同时显示日志信息import logginglogger=logging.getLog ...