css3 3d翻转效果

最新推荐文章于 2025-03-20 18:59:14 发布

weixin_45846263

最新推荐文章于 2025-03-20 18:59:14 发布

阅读量249

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45846263/article/details/105752938

版权

本文介绍了如何利用CSS3的3D变换来创建翻转效果，详细讲解了perspective、translateZ、perspective-origin和backface-visibility等关键属性的作用，以及如何通过这些属性实现3D翻转效果的步骤和代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3 3d翻转效果

3d变换

perspective （透视，视角）：属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。决定了你所看到的是2D transform 还是3D transform 。
视距（perspective）和translateZ
视距就是眼睛距离物体原本位置的距离，而translateZ()就是用来改变物体当前位置离物体原本所在位置距离的方法。
当translateZ的值大于或者很接近视距的时候，那整个屏幕都被这个元素占满了。
景深基点（perspective-origin
perspective-origin属性定义3D元素所基于的X轴和Y轴。该属性允许您改变3D元素的底部位置。说白了就是你移动到不同的地方看这个元素，默认值是正对着元素看，即 perspective-origin: 50% 50% 0;
第一个值可以为left|right|center|百分比|length，表示向x轴方向移动视角（眼睛所在的位置）的距离。
第二个值可以为top|bottom|center|百分比|length，表示向y轴方向移动视角（眼睛所在的位置）的距离。
第三个值只能是具体的length，表示视角向z轴方向移动的距离。

如果在该属性父元素上和子元素上都设置了perspective会叠加，从而形成更佳立体的效果
在父元素： perspective: 800px;
在子元素： transform: perspective(800px) rotateY(45deg);
ps： perspective作为属性值的时候最好写在第一位
设置在子元素上时，origin默认时center center

背面隐藏（backface-visibility）
属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。默认值是visible，背面可见。
当设置了backface-visibility:hidden;的时候，当一个元素旋转知道完全翻了一个面的时候，那么这个元素将会不可见。
参考：https://blog.youkuaiyun.com/jingtian678/article/details/76358525

3d翻转效果

思路：
（1）最外层元素设置perspective以实现3D效果。
（2）当鼠标滑过最外层元素时，第二包裹层翻转180度，同时设置过渡速度。
（3）两个翻转块绝对定位，以致实现相同位置的叠加。同时设置backface-visibility避免在实现动画效果时露出背面。
（4）让.back最开始就翻转180度，以背面示人。
代码：

<div class="contentbox">
   <div class="qcontainer">
    <a href="#" class="film">
     <!-- 正面 -->
     <div class="face front"><img src="img/img1.jpg"></div>
     <!-- 背面 -->
     <div class="face back"><h3>易烊千玺!!</h3></div>
    </a>
   </div>
   <div class="qcontainer" >
    <a href="#" class="film">
     <div class="face front"><img src="img/img2.jpg"></div>
     <div class="face back"><h3>马天宇!!</h3></div>
    </a>
   </div>
   <div class="qcontainer">
    <a href="#" class="film">
     <div class="face front"><img src="img/img3.jpg"></div>
     <div class="face back"><h3>朱一龙!!</h3></div>
    </a>
   </div>
   <div class="qcontainer">
    <a href="#" class="film">
     <div class="face front"><img src="img/img4.jpg"></div>
     <div class="face back"><h3>小鬼!!</h3></div>
    </a>
   </div>
  </div>

body{
    background-color: #000000;
   }
   .contentbox{
    width:960px;
    margin:auto;
    margin-top:2em;
    overflow: hidden;
   }
   .qcontainer{
    /*舞台（动画元素的父容器）perspective*/
    perspective: 400px;
    float:left;
    width:220px;
    height:180px;
    margin-right:20px;
   }
   .film{
     /*动画元素transform-style*/
    transform-style:preserve-3d;
    /* 动画效果 */
    transition:1.5s;
    display: block;
   }
   .film img{
    width:220px;
    height:180px;
   }
   .qcontainer:hover .film{
    /* 绕y轴旋转 */
    transform:rotateY(180deg);
   }
   .face{
    position:absolute;
    /*动画元素背后设置为hidden*/
    backface-visibility:hidden;
   }
   .face h3{
    color:white;
    text-align:center;
   }
   .back{
    width:220px;
    height:180px;
    /* 绕y轴旋转180度，以背面示人 */
    transform:rotateY(180deg);
    /* 背景颜色渐变 */
    background-image: linear-gradient(#fdbb5a,#db5726);
   }

效果：
在这里插入图片描述