首页 > 其他分享 >CSS透视与Z轴

CSS透视与Z轴

时间:2023-07-19 12:15:03浏览次数:40  
标签:透视 物体 改变 相当于 CSS 3D

一.CSS透视通过模拟人眼的视角来创建三维效果(可以理解为看3D电影,需要借助3D眼睛,这个透视就是让了让网页上产生3D的效果)。我们在现实生活中,当物体远离我们时,会看到它们变小变远。透视效果就是基于这个原理。
image

二.改变透视视与改变z轴的不同
(一)、改变透视
改变透视相当于主动挪动眼睛,调整眼睛与屏幕的距离,所以透视数值越大相当于眼睛远离物体,物体越小
image
(二)、改变Z轴
改变Z轴相当于主动挪动物体,调整物体与眼睛的距离, 所以z轴数值越大相当于将物体拿近看,物体越大

三、透视距离定了,才能好的观察物体在Z轴上的位置变化

四、三维坐标系
image

标签:透视,物体,改变,相当于,CSS,3D
From: https://www.cnblogs.com/bangbangzoutianya/p/17565080.html

相关文章

  • css将多余的字变成...
    display:-webkit-box;/*作为弹性伸缩盒子模型显示*/-webkit-line-clamp:1;/*显示的行数;如果要设置2行加...则设置为2*/overflow:hidden;/*超出的文本隐藏*/text-overflow:ellipsis;/*溢出用省略号*/-webkit-box-orient:vertical;/*伸缩盒子......
  • 色彩解锁:探索革命性的CSS color()函数和新的色彩空间
    Google在6月份发布了一篇新博客,介绍了CSS中的新颜色空间和函数,支持所有主流引擎。下面是文章的链接:NewCSScolorspacesandfunctionsinallmajorengineshttps://web.dev/color-spaces-and-functions/?ref=sidebar该文章展示了一些支持的色彩空间的例子。color()函数介绍:color......
  • CSS中新增的样式:圆角边框、盒子阴影、文字阴影
    一:css新增样式之圆角边框(1)简介:在css3中新增加了圆角边框的样式,这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。(2)原理:radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角的效果。二:css新增样式之盒子阴影(1)简介:css3中新增加了盒子阴影,我们可以使用b......
  • CSS中关于Calc 函数的使用规则
    calc()函数用于动态计算长度值。需要注意的是,运算符前后都需要保留一个空格,例如:width:calc(100%-10px);任何长度值都可以使用calc()函数进行计算;calc()函数支持"+","-","*","/"运算;calc()函数使用标准的数学运算优先级规则;......
  • 前端(CSS)
    csscss:层叠样式表就是给html增加样式的,让其变得更加好看。先学习选择器:作用就是如何找标签找到标签之后:给标签增加样式选择器的语法结构选择器{属性名1:属性值1属性名2:属性值2属性名3:属性值3属性名4:属性值4} CSS的注释语法:/*内容......
  • 如何使用CSS3 @font-face 实现个性化字体
    如何使用CSS3@font-face实现个性化字体。 在网页中,我们可以使用CSS的font-family属性来定义字体。但是,定义的字体能否在用户的电脑上正确显示,取决于用户的电脑上是否安装了该字体。我们经常看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常用户的电脑上并没有安装,所......
  • css 超出行显示展开收起
    显示展开收起:<divclass="wrapper"><inputid="exp111"class="exp"type="checkbox"><divclass="text">......
  • 纯CSS实现contain布局
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=......
  • postcss-px-to-viewport 插件移动端适配
    1.简介:postcss-px-to-viewport是一个将px单位转换为视口单位的(vw,vh,vmin,vmax)的PostCSS插件。将CSS中的px单位转化为vw,来进行移动端适配,1vw等于1/100视口宽度。2.地址:postcss-px-to-viewportGitHub地址3.安装:npmnpminstallpostcss-px-to-viewport--save-......
  • 纯css 四边形的角样式(只有两个角是三角,其他两个是线段)
    效果如图:核心:使用伪类代码如下:<divclass="box-style"></div>.box-style{position:relative;//纯css只有四个角有边框的样式box-shadow:0px0px12px1px#003ba26binset;background:linear-gradient(toleft,#1f5fd3,#1f5fd3)lefttopno-repeat,......