css33d坐标系,CSS3-3D技术
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180度,如下图
3D坐标系.png
简单记住他们的坐标:
x左边是负的,右边是正的
y 上面是负的, 下面是正的
z 里面是负的, 外面是正的
rotate
rotateX() : 就是沿着 x 立体旋转.
rotateY():沿着y轴进行旋转
rotateZ()�:沿着z轴进行旋转
透视(perspective)
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
透视原理: 近大远小 。
浏览器透视:把近大远小的所有图像,透视在屏幕上。
perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置
注:并非任何情况下需要透视效果,根据开发需要进行设置。
perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素
理解透视距离原理:
透视.png
移动translate
translate3d(x,y,z)
[注意]其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值
开门案例
开门.gif
开门大吉
section {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
background: url(images/3.jpg) no-repeat;
position: relative;
perspective: 1000px; /*给父盒子增加透视*/
}
.door-left,.door-right {
position: absolute;
width: 50%;
height: 100%;
background-color: pink;
transition: all 1s; /*连个门都是过渡*/
}
.door-left {
left: 0;
border-right: 1px solid #000;
transform-origin:left; /*旋转中心点*/
}
.door-right {
right: 0;
border-left: 1px solid #000;
transform-origin:right; /*旋转中心点*/
}
.door-left::after,
.door-right::after {
content: "";
position: absolute;
top: 50%;
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%); /*自己高度的一半*/
}
.door-left::after {
right: 5px;
}
.door-right::after {
left: 5px;
}
/* 鼠标经过section,两个门进行翻转 */
section:hover .door-right {
transform: rotateY(130deg);
}
section:hover .door-left {
transform: rotateY(-130deg);
}
backface-visibility
两面翻转的盒子
翻转.gif
Document
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
/*transform-style: preserve-3d;*/
/* 1.保留当前空间位置
2.是图片扁平化*/
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 8s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /*不是正面对向屏幕,就隐藏*/
}
div:hover img {
transform: rotateY(180deg);
}
css33d坐标系,CSS3-3D技术相关推荐
- 手把手教你玩转CSS3 3D技术
手把手教你玩转 CSS3 3D 技术 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2 ...
- CSS3 3D transform变换
transform的坐标是需要了解的特性. 我们的rotateX,rotateY,rotateZ,和translateX,translateY等都是基于相同的坐标系来定位的. 3D的坐标如下入所示: ...
- CSS3 3D转换和旋转木马案例
文章目录 前言 有什么特点 一.三维坐标系 3D转换 二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...
- 结构光、双目、ToF——三种3D技术对比
本文虽然命名为对比文档,但是对比意义不是特别强烈的内容仍不在少数--如三种3D技术的误差等部分--换言之,本文旨在通过对比的形式对三种3D技术的特点和特性进行总结.资料主要来自于网络,部分相关参考文献 ...
- CSS3 3D transform
目录 一.transform简介 1.定义和用法 2.浏览器支持 3.语法 二. 学习步骤 1. 前情提要 2. 什么是3D transform变换 3. 关键点:rotateX, rotateY, ...
- 【Web动画】CSS3 3D 行星运转 浏览器渲染原理
承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...
- CSS3 3D动画(一)
CSS3 3D动画知识点详解 这篇文章的主要内容是关于css3关于新增3d部分的一个解析,那么下一篇内容我们将会进行一个3D相册的一个练习. 由于CSS3的新增还有很多浏览器的不支持,所以我们简单说一 ...
- HTML+CSS教程(十)css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
- 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...
- CSS3 3D的总结(初学者易懂)
CSS3 3D案例的总结 如果要说是3D的基础概念,首先我就来说一说rotateX().rotateY().rotateZ()这几个属性 rotateX():对应的是3D模型中的X轴上的旋转,传入的参 ...
最新文章
- 知识图谱(三)——知识体系构建和知识融合
- python正则表达匹配汉字
- 经验总结03-dwr
- html使标签为正方形,W3C CSS测试答案
- tt公路车Java配置怎么样_普通公路车换TT车把可以吗,别的东西还有需要换的吗?...
- java mysql 输入数据库_如何用JAVA录入数据到SQL数据库
- AnyRec Screen Recorder自动录制时长设置教程
- 最新mysql数据库源码编译安装。
- 首都师范 博弈论 9 5 6引入精神奖励后的博弈模型
- SpringCloud第八章:Gateway新一代网关
- 浅析大数据与人工智能
- t检验比较两种算法的性能
- 《Python程序设计基础 》课堂笔记整理
- 深度学习21天实战caffe学习笔记《3 :准备Caffe环境》
- ​2019胡润百富榜公布:中国互联网上演: 龙虎斗 , 阿里暂时领跑 , 企鹅紧随其后 , 李彦宏,雷军掉队...
- hive sql 向上取整、向下取整、保留小数位的函数
- 麦克风阵列之一阶差分麦克风阵列
- fedora15 安装nvidia 显卡驱动
- cna12.dll mysql_cna12.dll,下载,简介,描述,修复,等相关问题一站搞定_DLL之家
- 关于 ‘else‘ without a previous ‘if‘错误
热门文章
- 利用pandas,pyplot 绘制柱状图
- 计算机软件行业规范,计算机软件技术规范(ppt 117页)
- ef mysql dbfirst_.NetCore教程之 EFCore连接Mysql DBFirst模式
- php在线支付系统,Thinkphp各大支付平台在线支付集成源码
- vlookup使用步骤_使用vlookup出错,看看原因多为这几个!快来看看!
- markdown 代码块背景色_markdown 绘图利器之graphviz
- python3 turtle 在哪下载安装_Python3 turtle安装和使用教程
- android 自定义指南针,如何在android中制作自定义指南针视图
- matlab数字信号处理 王彬,MATLAB数字信号处理
- java 取对象的类_Java中通过Class类获取Class对象的方法详解