前端学习日记：CSS3的3D变换之transform-skew和rotate制作翻页效果

女爷i 2023-06-06 12:29 2阅读 0赞

<style>  
    body \{  
        margin: 0;  
        padding: 0;  
        font-family: '微软雅黑';  
        background-color: \#F7F7F7;  
    \}  
      
    .text-box \{  
        margin-top: 100px;  
        text-align: center;  
        line-height: 1;  
        font-size: 100px;  
        /\*color: \#065DAC;\*/  
    \}  
      
    .text-box span \{  
        display: inline-block;  
        position: relative;  
    \}  
      
    .text-box span::before,  
    .text-box span::after \{  
        content: attr(data-text);  
        position: absolute;  
        left: 0;  
        top: 0;  
        transition: all 1s;  
        transform-origin: left center;  
    \}  
    /\*翻起的页\*/  
    .text-box span::before \{  
        z-index: 3;  
        color: \#eee;  
        transform: rotateY(-15deg);  
    \}  
    /\*影子\*/  
    .text-box span::after \{  
        z-index: 2;  
        color: rgba(0, 0, 0, 0.3);  
    \}  
      
    /\*  skew：倾斜（可以看成是x轴向右上方（-y方向）倾斜了45度，y轴向远离眼睛的方向(-z方向)倾斜了45度）  
                   （相当于rotate倾斜了45度，可以看成是整个坐标系向-x-y+z这个方向倾斜了45度）  
    skew(x-angle,y-angle)   定义沿着 X 和 Y 轴的 2D 倾斜转换。    
    skewX(angle)            定义沿着 X 轴的 2D 倾斜转换。    
    skewY(angle)            定义沿着 Y 轴的 2D 倾斜转换。  
    \*/  
    .text-box:hover span::before \{  
        transform:skew(45deg, 0deg);  
    \}  
    /\*影子\*/  
    .text-box:hover span::after \{  
        transform: skew(0deg, 20deg);  
    \}  
    </style>

<body>  
    <div class="text-box">  
        <span data-text="凯">凯</span>  
        <span data-text="旋">旋</span>  
        <span data-text="而">而</span>  
        <span data-text="归">归</span>  
    </div>  
</body>

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 3D 转换 ④ ( 3D 旋转 rotate3d | rotate3d 语法 | rotate3d 自定义轴旋转 | 元素旋转方向 - 左手准则 | 代码示例 )

文章目录一、3D 旋转 rotate3d 1、rotate3d 语法 2、rotate3d 自定义轴旋转 3、元素旋转方向

一时失言乱红尘/ 2023年10月14日 19:11/ 0 赞/ 57 阅读

相关前端学习日记：css3的3d变换制作旋转正方体(骰子)

<style> .box\{ width: 250px; height: 250px;

末蓝、/ 2023年06月06日 12:28/ 0 赞/ 65 阅读

相关前端学习日记：css3的2d变换tranform之综合变换实现小火箭飞行(流星)效果

<style> html,body\{ height:100%; \}

╰半夏微凉°/ 2023年06月06日 12:28/ 0 赞/ 4 阅读

相关 CSS 知识碎片[二] CSS3 3d 特效翻页 & 立方体效果

> 业精于勤荒于嬉今天今天今天，读完了本月的第三本书，书中自有黄金屋一点都没错了。开始一件事情最好的时机是十年前，其次是现在。今天来写一个css3 的3d 特效。

左手的ㄟ右手/ 2022年12月27日 08:41/ 0 赞/ 307 阅读

相关 swiper-翻页效果---3D翻转效果

本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果首先搭建swiper页面，设置CSS样式，为了观看效果，这一章依然在slide当中添加背景图片。

妖狐艹你老母/ 2022年09月23日 04:00/ 0 赞/ 715 阅读

相关 swiper-页面的翻页动画--3D方块效果

这次内容我们接着介绍在swiper页面的翻页动画--3D方块效果。首先搭建swiper页面，设置CSS样式，为了观看效果，这一章依然在slide当中添加背景图片。

梦里梦外;/ 2022年09月23日 04:00/ 0 赞/ 355 阅读

相关纯CSS实现3D翻牌效果

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。简易效果请大家狠戳这里[在线体验][Link 1]，或[下载收藏][Link 2]。改进效果请

待我称王封你为后i/ 2022年08月25日 08:36/ 0 赞/ 480 阅读

相关 CSS3 3D transform变换

一、写在前面的秋裤早在去年的去年，我就大肆介绍了[2D transform相关内容][2D transform]。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚

系统管理员/ 2022年08月02日 05:42/ 0 赞/ 308 阅读

相关学习CSS3 3D转换，制作一个3D立方体

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需

谁借莪１个温暖的怀抱￠/ 2022年07月15日 00:20/ 0 赞/ 382 阅读

相关学习CSS3 3D转换，制作一个3D立方体

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需

左手的ㄟ右手/ 2022年07月15日 00:20/ 0 赞/ 345 阅读