记录css 3d效果实现盒子两面反转

最新推荐文章于 2023-06-12 18:39:03 发布
最新推荐文章于 2023-06-12 18:39:03 发布
阅读量203 收藏
点赞数 1
文章标签： css 3d css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_51274791/article/details/125019136
版权

1、盒子反转
2、保留子元素3d空间，transform-style: preserve-3d;
3、隐藏子盒子的背面，backface-visibility: hidden;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body{
            perspective:350px;
            
        }
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all .4s;
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(180deg);
        }
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 20px;
            color:white;
            text-align: center;
            line-height:200px;
            backface-visibility: hidden;
        }
        .front{
            z-index:2;
            background-color:pink;
        }
        .back {
            background-color: purple;
            transform:rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="front">正面</div>
        <div class="back">反面</div>
    </div>
    
</body>
</html>
是火锅吖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【CSS】利用Vue实现数字翻滚动画效果
九日的博客
04-10 1186
通过Vue的响应式数据更新结合CSS3的动画效果，我们可以实现非常酷炫的数字翻滚效果，给数据可视化带来更多动感和吸引力。代码实现了基本的逻辑，但在实际开发中，可能需要更多的调优和优化，以达到最佳的性能和视觉体验。
css实现数字切换动画（封装成React组件）
LYFlied的博客
03-11 2684
css transition 实现数字切换动画效果，并封装成React组件。
CSS打造图片翻转立体3D效果
m0_64642443的博客
06-12 2663
css实现图片翻转立体3D效果
css3动画： 3d照片旋转transfrom
qq_51813155的博客
10-31 1498
css3动画： 3d照片旋转1.原理：3d照片：transfrom:含义是改变，转换第一步：第二步：代码： 1.原理：3d照片： 3d照片: 6张图片, 立方体，旋转，移动 用到：css3中transfrom transfrom:含义是改变，转换 如： transform: rotateY(180deg) translateZ(150px); 元素以Y轴旋转180度，向z轴正方向移动150px Z轴:元素正方向（往外面），如果元素旋转Y轴180度，Z轴正方向：往里面 X轴：旋转90度：往上为正方向，往
css特效之父元素转动，子元素始终保持正的（公转不自转）
qq_43217258的博客
03-21 1705
帮忙写了下，解决了旋转问题（公转不自转），但是五个子元素靠定位是没用的，想到大学老师教的偏移属性，找啊找，找到了。冲突，不能用在一个元素上，室友的方法是拆了，子元素转就行了，我不想写这么多重复代码，就想到，我多套一个盒子，然后转变思路，父转，子反方向转，但是因为无法定位元素位置，用的绝对定位的手动位置，根本算不准，导致出问题。需求：五个东西跟着父元素转，但是保持正面朝上。我开始的思路是：让父盒子转就行了。前端自学群计算机专业硕士女同学（不放一起就行了，解决了。
纯CSS实现3D按钮效果实例代码
09-24
本篇文章主要介绍了纯CSS实现3D按钮效果实例代码，css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。有兴趣的可以了解一下。
原生js和css实现3D波浪效果图
02-08
原生js和css实现3D波浪效果图
CSS实现卡片3D翻转效果的示例代码
09-24
本篇文章主要介绍了CSS实现卡片3D翻转效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS实现超酷炫3D圣诞树效果
最新发布
12-25
纯CSS+HTML实现的圣诞树动画效果 3D效果 代码简单易懂 学习与实用的不二之选 包含旋转效果，带光晕，底部带阴影效果，还有星光点缀其间，场景梦幻，代码简单，小白也能看的懂，老鸟也能有启发，快快下载体验吧！ ...
纯css实现照片墙3D效果的示例代码
09-24
主要介绍了纯css实现照片墙3D效果的示例代码，可以实现鼠标经过图片实现改变，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5/CSS3翻转动画（二）
03-30
NULL 博文链接：https://sarin.iteye.com/blog/1331326
html5 css3文字翻转动画效果.zip
07-04
html5 css3文字翻转动画效果是一款基于html5 css3实现的3D立体文字翻转动画效果代码。
如何用CSS将DIV变得有正反面，能像卡牌一样反转
curry_xiao的博客
05-03 2907
最终效果如下 总所周知，div盒子是一个二维的盒子，没有厚度。如果仅仅将div的盒子翻转180度，div里面的内容仍会显现出来，并不会有正反面的效果。本次实践就是将div盒子实现有正反面的效果，能够像卡片一样翻面。 首先要先建立两个盒子，当作卡片的正反面，这两个盒子通过定位来重叠放到一起。 原理就是重叠的两个盒子同时进行旋转。要注意的地方是，下面的盒子需要先设置透明度来隐藏，不然一起旋转的时候视觉效果会很奇怪。接着给前后两个盒子，同时添加动画效果。上面的盒子旋转至90度时，透明度.
CSS3实现图片的3D旋转效果
weixin_44566194的博客
03-12 1804
纯CSS实现图片的3D旋转效果
css3制作动画色子,css3实现3D色子翻转特效
weixin_34168834的博客
08-04 461
css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下：复制代码代码如下:.....................在body中定义一个叫做outer的div，它是最外层的div，用来提供一个3D场景，可以认为它是一个3D图形的展示平台，只有定义了这样一个div，才能够展示3D...
css3翻转后显示背部隐藏的元素的效果3D翻转效果- transform rotate backface-visibility
热门推荐
xuyunfei_2012的博客
06-24 1万+
最近在做一个项目，需求是点击一个div元素中的按钮，此元素进行翻转，将背部遮挡的div元素显示出来。 最初的想法是将这两个div绝对定位，重叠在一起，背部的元素初始化transform: rotateY(180deg)；然后翻转 这个元素的父元素，但是测试没有用，显示的总是最上面的那个元素。     后来查阅资料，想到了一种实现方式，具体做法如下： （1）先进行布局，注意标红的部分，这个属
css3实现正反面翻转效果
pgzero的博客
01-18 1012
<div class="box"> <div class="positive" :class="onoff == 1 ? '' : 'positive'"></div> <div class="anti" :class="onoff == 0 ? '' : 'anti'"></div> </div> export default { data() { return { onoff:1, } } } <st
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
qq_45687086的博客
05-17 3845
各位读者大家好，我是一只小菜鸟。目前正在学习web前端方面的相关知识.，这也是小菜鸟第一次写博客。写的有哪里不对的地方欢迎各位指正。 本篇文章内容就是利用HTML简单的布局再加上CSS3的动画效果做出一个立体旋转的照片墙。效果如下图 ...
CSS3实现翻转(Flip)效果
weixin_34233679的博客
10-24 930
今天，我们用比较简洁的CSS3来实现翻转效果。 动画效果 效果分析 当鼠标滑过包含块时，元素整体翻转180度，以实现“正”“反”面的切换。 HTML分析 分析：.container，.flip为了实现动画效果做准备。.front,.back各包裹一张图片。实现该效果的HTML如下： <div class="container"&g...
css实现3个盒子3d旋转动画
12-16
以下是CSS实现3个盒子3D旋转动画的代码和步骤： ```html <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ``` ```css .container { perspective: 1000px; /* 视距，决定了3D效果的大小 */ } .box { width: 100px; height: 100px; background-color: #ccc; position: relative; transform-style: preserve-3d; /* 触发3D效果 */ animation: rotate 5s infinite linear; /* 添加旋转动画 */ } .box:nth-child(1) { transform: rotateY(0deg) translateZ(150px); } .box:nth-child(2) { transform: rotateY(120deg) translateZ(150px); } .box:nth-child(3) { transform: rotateY(240deg) translateZ(150px); } @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } ``` 步骤： 1. 创建一个包含三个盒子的容器。 2. 为容器设置透视效果，即perspective属性。 3. 为每个盒子设置宽高和背景颜色，并将它们的position属性设置为relative。 4. 为每个盒子设置transform-style属性为preserve-3d，以触发3D效果。 5. 为每个盒子设置transform属性，通过rotateY()函数实现沿Y轴旋转，并通过translateZ()函数实现沿Z轴平移，使它们分布在3D空间中。 6. 为每个盒子添加旋转动画，通过animation属性实现。 7. 创建一个名为rotate的关键帧动画，通过transform属性实现旋转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值