CSS3-实现翻书效果

最新推荐文章于 2024-04-08 09:44:17 发布

ogisreal

最新推荐文章于 2024-04-08 09:44:17 发布

阅读量1.4k

点赞数 1

文章标签： css3 html

原文链接：https://blog.csdn.net/yun_shuo/article/details/111597485

版权

CSS3简单特效–transform实现翻书效果
上一篇介绍了animation如何实现流光按钮效果，现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果，下图是鼠标停在div上，“书页”翻动后的效果。
在这里插入图片描述
可以看出这有一种3D的效果，css3中让元素变成3D空间元素，通常来说分为以下三步：
1、父级中加入视距：perspective:800px;
2、在需要显示3D效果的元素加上一个3D层：transform-style:preserve-3d;
3、设置观看视角：perspective-origin:center center;（这个值不设置的话默认为center）。
3D场景设置好后，每一个书页为一个矩形，黄色的虚线边框利用ul标签套五个li。要实现li沿左边距旋转，需使用css3中transform属性，下面给大家介绍一下在使用transform属性时常用值~
设置旋转中心属性：transform-origin:x轴点 y轴点;（可以设置像素值也可以设置center、left等）。
设置旋转方式：transform:rotate();（围绕X轴旋转为rotateX(),Y、Z轴同理，括号中填旋转的角度deg）。
给父级设置3d层主要代码如下

body{
            background-color: black;
            perspective: 800px;
        }
        ul{
            position: relative;
            width: 200px;
            height: 300px;
            box-shadow: 0px 0px 5px 1px gold;
            margin: 200px auto;
            transform-style: preserve-3d;
            
        }
        ul li{
            position: absolute;
            border: 1px dashed gold;
            width: 200px;
            height: 300px;
            transform-origin:0px center;
        }

一般3D层给实现3D效果的父盒子，视距给最大的盒子body。
在给子元素设置旋转角度过程中，使用伪类选择器可以减少内存的占用，这里使用到:nth-child()伪类。
主要css代码如下：

 ul:hover li:nth-child(1){
            transform:rotateY(-180deg);
        }
        ul:hover li:nth-child(2){
            transform:rotateY(-160deg);
        }
        ul:hover li:nth-child(3){
            transform:rotateY(-150deg);
        }
        ul:hover li:nth-child(4){
            transform:rotateY(-140deg);
        }
        ul:hover li:nth-child(5){
            transform:rotateY(-130deg);
        }

最后为了实现书页每页翻动时有延时间隔，使用过度属性transition实现过度动画效果。（transition:transition-property(过度属性) transition-duration(过度时间) transition-timing-function(动画类型) transition-delay(延时时间)，例如transition:all 2s linear .5s;的意思是所有元素动画延时0.5秒以线性效果2秒完成）
完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        body{
            background-color: black;
            perspective: 800px;
        }
        ul{
            position: relative;
            width: 200px;
            height: 300px;
            box-shadow: 0px 0px 5px 1px gold;
            margin: 200px auto;
            transform-style: preserve-3d;
            
        }
        ul li{
            position: absolute;
            border: 1px dashed gold;
            width: 200px;
            height: 300px;
            transform-origin:0px center;
            /* background-color: white; */
        }
        ul:hover{
            transform:rotateX(30deg);
            transition:all 2s;
        }
        ul:hover li:nth-child(1){
            transform:rotateY(-180deg);
            transition:all 2s  .5s;
        }
        ul:hover li:nth-child(2){
            transform:rotateY(-160deg);
            transition:all 2s  .8s;
        }
        ul:hover li:nth-child(3){
            transform:rotateY(-150deg);
            transition:all 2s 1s;
        }
        ul:hover li:nth-child(4){
            transform:rotateY(-140deg);
            transition:all 2s 1.2s;
        }
        ul:hover li:nth-child(5){
            transform:rotateY(-130deg);
            transition:all 2s  1.4s;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

ogisreal

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS3-实现翻书效果

CSS3简单特效–transform实现翻书效果上一篇介绍了animation如何实现流光按钮效果，现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果，下图是鼠标停在div上，“书页”翻动后的效果。在这里插入图片描述可以看出这有一种3D的效果，css3中让元素变成3D空间元素，通常来说分为以下三步：1、父级中加入视距：perspective:800px;2、在需要显示3D效果的元素加上一个3D层：transform-style:preserve-3d;3、设置观看
复制链接

扫一扫