.before和.after+3D旋转案例（字体翻转的效果）

最新推荐文章于 2020-12-20 03:39:31 发布

落花新月

最新推荐文章于 2020-12-20 03:39:31 发布

阅读量3.5k

点赞数

分类专栏： Web前端文章标签：字体翻转案例 skew倾斜 transition过渡 before伪元素 scale缩放

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/50938980

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.行内的盒子——考虑定位

2.3D旋转：

rotateX()

rotateY()

rotateZ()

设置旋转中心点：transform-origin

skew(x,y) 倾斜

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素练习</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{
            font:8em 微软雅黑;
            padding:200px;
        }
        .music{
            margin: .2em;
            color: #323FFF;
            position: relative;        /*子绝父相*/
        }
        .music:before,.music:after{
            content: attr(music_data);         /*获取属性的字符串*/
            position: absolute;
            top:0;
            left: 0;
            transform-origin: left top;         /*设置旋转中心点为左上角*/
            transition:transform 0.5s ease-in 0s;
        }
        .music:before{
            color: #fff;
            z-index: 3;        /*提高权重*/
            transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg);      /*绕着Y轴旋转*/
        }
        /*该部分当做阴影部分*/
        .music:after{
            color: rgba(0,0,0,0.2);       /*字体颜色：透明度为2的黑色*/
            transform: scale(1.1,1) ;       /*X轴方向缩放1.1倍，Ｙ轴不变*/
            z-index: 2;
        }
        .music:hover:before{
            color: #fafafa;     /*修改最上面白色字体的颜色*/
            /*skew(x,y)表示倾斜*/
            transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg) skew(0deg,1deg);
        }
        /*阴影的变化*/
        .music:hover:after{
            /*增大Y轴的倾斜度,继续按照之前的缩放*/
            transform:scale(1.1,1) rotateX(0deg) rotateY(-40deg) rotateZ(0deg) skew(0deg,10deg);
        }
    </style>
</head>
<body>
<span class="music" music_data="古">古</span>   <!--music_data为自定义属性-->
<span class="music" music_data="典">典</span>
<span class="music" music_data="音">音</span>
<span class="music" music_data="乐">乐</span>
</body>
</html>

运行效果：

鼠标移动上去之后：

（注：该案例学习视频来自传智）

落花新月

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
.before和.after+3D旋转案例（字体翻转的效果）

1.行内的盒子——考虑定位2.3D旋转：rotaeX()rotateY()rotaeZ()设置旋转中心点：transform-originskew(x,y) 倾斜示例代码：html>lang="en"> charset="UTF-8"> 伪元素练习 type="text/css"> *{margin: 0;p
复制链接

扫一扫

专栏目录