css深入剖析transform的translate和perspective
这里写目录标题
- 一、translate
- 二、perspective
- 1.perspective-origin
- 2.transform-style: preserve-3d
- 3.backface-visibility: hidden;
- 三、使用规则
一、translate
translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translatex(): 指定对象X轴(水平方向)的平移
translatey(): 指定对象Y轴(垂直方向)的平移
translatez(): 指定对象Z轴的平移
translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
transform: translateX(50%);/*相对于本身当前位置右移50%宽度*/
transform: translateZ(100px);/*如果设置了perspective属性,那么元素会相对于屏幕逐渐向我们“靠近”,即放大*/
二、perspective
指定透视距离,在相机拍照中叫景深,也可以叠加
放在父级上,即拥有“第二者视角”
放在自身、兄弟身上,即以“自己的视角”
perspective: 500px;/*相当于在z轴500px像素的位置观察*/
1.perspective-origin
指定透视点的位置,我们的视角所在方位
body{perspective: 800px;perspective-origin: 300px 100px;
}
.box{position: absolute;top: 200px;left: 200px;width: 200px;height: 200px;border-radius: 50%;background-color: chartreuse;
}
.content{width: 200px;height: 200px;background-image: url(clock.png);background-size: cover;transform: translateZ(100px);
}
<div class="box"><div class="content"></div>
</div>
当我们设置视角距离屏幕800px,从位置(300px,100px)的位置观看,如图(我们视线经过)
我们是可以看见立体效果的,即看到了后面的一层绿布
.box{position: absolute;top: 200px;left: 200px;width: 200px;height: 200px;border-radius: 50%;background-color: chartreuse;transform: rotateY(45deg);
}
但是当我们将父元素旋转后,发现后面的绿布又看不到了
这就是正常情况下浏览器的渲染机制——2d
2.transform-style: preserve-3d
当我们在当前父级加上transform-style: preserve-3d该属性时,就能渲染出正常3d效果
.box{position: absolute;top: 200px;left: 200px;width: 200px;height: 200px;border-radius: 50%;background-color: chartreuse;transform: rotateY(45deg);transform-style: preserve-3d;
}
注意:perspective和transform-style: preserve-3d任意一个被设置,在没有其他参照物情况下,子孙将会将设置该属性的元素作为参照物(例如定位)
3.backface-visibility: hidden;
当3d效果时旋转到背面,该属性设置是否显示背面。
三、使用规则
body{perspective: 300px;
}
div{width: 150px;height: 150px;background-color: chartreuse;
}
body{perspective: 600px;
}
div{width: 150px;height: 150px;background-color: chartreuse;
}
在元素没有移动时,不管从近,远观察,其大小不变。(注:我们最终关注的始终是屏幕)
body{perspective: 300px;
}
div{position: absolute;top: 200px;left: 200px;width: 150px;height: 150px;background-color: chartreuse;transform: translateZ(100px);
}
此时我们设置元素沿z轴向“我们”靠近100px后
那么元素相对于在原屏幕上的大小就发生了改变
body{perspective: 300px;
}
div{position: absolute;top: 200px;left: 200px;width: 150px;height: 150px;background-color: chartreuse;transform: translateZ(-100px);
}
此时将元素“远离”100px
那么元素最终在屏幕上将会变小
其远离类似:两小儿辩日“近者大而远者小”
css深入剖析transform的translate和perspective相关推荐
- css深入剖析transform的skew
skew 一.skew 1.skew(x,y) 2.斜切目标 3.实例运用 一.skew 1.skew(x,y) 指定对象skew transformation(斜切扭曲).第一个参数对应X轴,第二个 ...
- CSS之transition, transform, tanslate,animation
transition:过渡 transform:变换 translate:平移 animation:动画 transition定义及用法 transition 属性是一个简写属性,用于设置四个过渡属性 ...
- CSS中变形效果-transform(平移、旋转、缩放、倾斜)
CSS中变形效果-transform(平移.旋转.缩放.倾斜) CSS3实现变形的优势 2-D变形 平移translate() 1.缩放scale() 2.倾斜skew() 3.旋转rotate() ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- 利用transform:translate使div居中显示
利用transform:translate使div居中显示 之前一直在用这个属性让某个div居中显示,但是一直有一个困惑,我想同时让水平和垂直都居中,可是水平方向总会有一点偏差,看一下以前怎么写的. ...
- css旋转动画定义中心,css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- CSS3中的transform、translate和transition
之前一直搞不清楚哪个是哪个,哪个有什么用,因为三个都有trans前缀,可以称为"trans一族". 1.transform 属性定义及使用说明:transform属性应用于元素的2 ...
- VUE-用到的样式左右(transform,translate,padding)
VUE-用到的样式左右 1.transform:translate transform:translate(0,100%) 表示从元素的当前位置延y轴方向,向下移动整个元素高度的距离 transfor ...
- transform的translate属性
今天在练习做登录表单的时候,发现了一个问题,放上表单后,父盒子上边距发生了塌陷.代码如下: .bg-img {position: relative;height: 100vh;background: ...
最新文章
- oracle 11g 大小,修改oracle 11GR2归档模式和归档目录及大小-Oracle
- 【MyBatis】MyBatis自动生成代码之查询爬坑记
- 转载:Windows CE内存管理
- mysql char varchar 性能_Mysql小细节:varchar与char在性能上的特点
- P1989 无向图三元环计数 思维 + 建图
- execl中设置的格式无法实现
- 复制过去格式不一样_不一样的立春节气:一个新的轮回开启,万物更新,疫情终将过去...
- 苹果数据线不能充电_20亿个不能用的苹果充电器,库克,你的这波强制“环保”翻车了...
- 爆牙齿的世界杯日记(忆)。
- 阶段5 3.微服务项目【学成在线】_day01 搭建环境 CMS服务端开发_23-页面查询服务端开发-Service及Controller...
- 正则表达式(一):php常用的正则匹配
- 【使用TIFF库对tif图片的读写】
- 树莓派CM4 装系统和换源
- java实现百度网盘爬虫
- java中成员变量的加载时机_工作奇谈——JAVA高级特性之反射
- 大厂高频面试题之Java内存区域分布
- 优麒麟mysql_ubuntu 优麒麟下mysql5.7root密码的重置
- 浅谈Everdroid流程化机器人设计器
- 平台的核心交互与基础角色——互联网平台建设系列
- 在html代码中加广告