如何实现容器360°翻转时候,容器内部文字一直是正面显示

容器翻转代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #test{
            width: 140px;
            height: 130px;
            text-align: center;
            border: 2px solid red;
            animation: round 6s infinite linear;
        }

        @keyframes round{
            0%{
                transform: rotateY(0deg);
            }
            100%{
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="test">
        <p>我要正面显示</p>
    </div>
</body>
</html>

效果如下:
图片描述

当容器翻转到背面时候,如何保持文字正面显示?是有相关的直接css属性还是需要叠加两个div?
感谢各位大佬了~

阅读 2.1k
1 个回答

那你就别360度啦,0到90,再90到0就好啦。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题