CSS文本翻转效果？

Posted 2023-05-08

【中文标题】CSS文本翻转效果？

【英文标题】：CSS Text Flip Effect?

【发布时间】：2013-01-18 21:00:53

【问题描述】：

自从我使用 css 以来已经有很多年了（当时没有 css3 这样的东西）所以我很难理解如何，在下一页；

http://www.webdesignerdepot.com/2013/01/how-to-build-a-threaded-comment-block-with-html5-and-css3/

红色链接在悬停时进行了一种翻转操作，我尝试使用“检查元素”来破译底层 css，但这就像意大利面条，我尝试将类粘贴到我的文件中，并且几乎没有分配它结果。

这种效果有正式名称吗，或者谁能告诉我如何复制它？

提前致谢。

【参考方案1】：

“滚动链接”类在这里发挥了作用。过渡和变换属性正在做很酷的效果。当你看到 -webkit- 和 -moz- 以及其他的时候，这意味着它是针对那些浏览器的，因为这些属性还不是标准的，但是一些浏览器还是希望支持它们。

/* ROLL LINKS */
.roll-link 
    display: inline-block;
    overflow: hidden;

    vertical-align: top;

    -webkit-perspective: 600px;
       -moz-perspective: 600px;
       -ms-perspective: 600px;
       perspective: 600px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
       -ms-perspective-origin: 50% 50%;
       perspective-origin: 50% 50%;



.roll-link:hover text-decoration:none;

.roll-link span 
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
       -ms-transition: all 400ms ease;
       transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
       -ms-transform-origin: 50% 0%;
       transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
       transform-style: preserve-3d;

.roll-link:hover span 
        background: #DD4D42;


        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );


.roll-link span:after 
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;

    color: #fff;
    background: #DD4D42;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
       -ms-transform-origin: 50% 0%;
       transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );

这部分例如：

.roll-link:hover span 
        background: #DD4D42;

        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );

这意味着当悬停在具有滚动链接类的元素内的 span 元素时，将应用这些样式，但当不悬停在它们上时将停止应用这些样式。

CSS 变换属性有点复杂，有几个部分。这里的很多人不喜欢 w3schools，但它们是入门教育的良好起点。 http://www.w3schools.com/cs-s-ref/css3_pr_transform.asp

【讨论】：

是的，我得到了课堂部分，但其余部分看起来完全陌生，当我将其粘贴进去时，无论出于何种原因都无法正常工作。这些示例很好地完成了工作，非常感谢

在 IE 11 上对我不起作用。原始文本会滚动，但新文本永远不会出现。

@Gammadyne Support is not full for IE 11。我认为如果 HTML 的编写方式不同，这个问题就会得到解决，这样它就不会依赖于嵌套的 span。 IOW，应该出现的文本链接需要直接应用样式。

【参考方案2】：

以下是负责旋转的代码：

-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );

这是一个有效的JSFiddle

【讨论】：

谢谢。我想为li 而不是“a”做翻转。这可能吗？