白也诗无敌诗意染千寻 2022-11-23 19:35 采纳率: 40%
浏览 2

3D转换实现两面翻转

body {
transform-style: preserve-3d;
perspective: 500px;
}

    .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        transition: all 0.5s;
        transform-style: preserve-3d;
    }
    
    .box:hover {
        transform: rotateY(180deg);
    }
    
    .front,
    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        text-align: center;
        line-height: 200px;
        color: #fff;
        font-size: 50px;
    }
    
    .front {
        background-color: red;
        z-index: 1;
    }
    
    .back {
        background-color: pink;
        transform: rotateY(180deg);
    }
你好
打工人

对应的html和css代码部分,3d转换实现鼠标经过切换两面翻转,为什么我这边转过来不会实现预期的效果

img

img

  • 写回答

1条回答 默认 最新

  • 星玖LE 2022-11-25 10:54
    关注

    应该是你html标签里面写错了,参考如下:

    img

    评论 编辑记录

报告相同问题?

问题事件

  • 创建了问题 11月23日

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题