在练习CSS3图片3D旋转的时候，为了使图片更有旋转的立体效果，设置了景深，但发现图片的旋转角度发生了偏移。

设置景深之前：

CSS

<style>div{margin-top: 200px;   /*上外边距200px*/margin-left: 200px;  /*左外边距200px*/}img{width: 300px;  /*图片宽度*/transform: rotateX(20deg); /*绕X轴旋转，180deg可实现图片垂直翻转*/}
</style>

HTML

<div><img src="dada.jpg"  alt="">
</div>

效果如下：
图片随绕X轴旋转了20°，但因为没有设置景深，很难看出效果。

设置景深：

景深需要加在图片父元素上

CSS

<style>div{perspective: 400px;  /*为图片父元素设置景深*/margin-top: 200px;   /*上外边距200px*/margin-left: 200px;  /*左外边距200px*/}img{width: 300px;  /*图片宽度*/transform: rotateX(20deg); /*绕X轴旋转，180deg可实现图片垂直翻转*/}
</style>

效果如下：
虽然可以明显发现图片发生了旋转，但是并不是我们想要的效果。想要的效果大致如红框区域。

设置图片在父元素内居中

最后发现是图片没有在父元素div内设置居中。由于景深加在了父元素div上，观察视角点位于div中心，所以在div内左边的图片就产生了偏移，如下图所示：

设置图片在父元素中心：

<style>div{perspective: 400px;  /*为图片父元素设置景深*/margin-top: 200px;   /*上外边距200px*/margin-left: 200px;  /*左外边距200px*/text-align:center; }
</style>

此时效果如下：

总结

在设置图片3D旋转时，要为父元素添加perspective属性，以便看出旋转效果。旋转元素需要在父元素内居中。

【CSS】记踩坑-图片3D旋转设置景深perspective相关推荐

原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
js百叶窗图片3D旋转切换js特效
下载地址原生js制作的百叶窗图片3D旋转切换特效,一款非常酷炫的网站焦点图banner轮播效果. dd:
Unity踩坑-多级四元数旋转（多级骨骼）
Unity踩坑-多级四元数旋转(多级骨骼) 前言当单个物体变为多级物体... 启发旋转更正 == 仅供学习.笔记之用 ,如有错误望指正== 前言上文讲了单个物体利用四元数进行局部或本地的旋转.如 ...
利用css的rotate()做一个3d旋转图集
视频效果: 3d旋转图集思路: 1.要完成这个作品我们一定要理解变形原点的概念,因为要将4张图片形成图中所示的效果,我们一定要改变变形在z轴上的位置,然后使用rotate()形成一个类似于旋转木马一 ...
php 图片 3d旋转图片,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
SAP学习日志--在配置上踩坑--强制帐户设置
创建采购申请的时候报错:SAP 物料XXXXX的强制帐户设置 (输入帐户设置类别) 的问题解决方法个人在已有的系统的基础上,配置一个新公司(MM模块) 踩坑点:创建采购申请的时候,提示在一番百度之 ...
银河麒麟踩坑笔记——sh文件设置开机自启
背景: 在上一篇打包好QT程序后,项目还要求做成自动开机自启,于是再一次开始摸索如何开机自启.原本我以为是项很小很简单的工作,没想到在银河麒麟下如此艰难,甚至搞崩了两次系统,差点重装. 踩坑的方法: ...
webpack4踩坑——图片打包
小伙伴们在学习 webpack 的时候有没有这样的经历呢,按照 webpack 官网的教程,一步步构建出自己的脚手架,看到满屏的代码,以及开发环境中花里胡哨的特效,啧啧啧,内心甚至有一丢丢小激动~~~ ...
css flex 踩坑总结
css 的 flex 布局虽然好用,但坑也不少.整理如下: (一)使用 flex 的 center 时,如果本身尺寸 > 父容器尺寸,则内容会显示不全 bug描述想要的 center 效果是: ...

【CSS】记踩坑-图片3D旋转设置景深perspective

设置景深之前：

设置景深：

设置图片在父元素内居中

总结

【CSS】记踩坑-图片3D旋转设置景深perspective相关推荐

最新文章

热门文章