css-3d动画特效

Freeman 发布于2019-08-02 11:14 / 453人阅读

摘要：为其盒子设置样式为其每个设置样式为其设置动画源码书页思路有五个，分别放上五个字。

3D 首先让我们来看一张效果图 1.1.1

属性

perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上

perspective-origin: 设置透视点的位置

transform-style :指定某元素的子元素是位于三维空间内，取值：flat | preserve-3d

1.1.1思路 （1）有三个div，一起放到一个盒子里面。

（2）为其盒子设置样式

.cube{
        width: 200px;
        height: 300px;
        transform-style: preserve-3d;
        margin:100px auto;
       
        position: relative;
        transform: rotateX(30deg);
        border-radius: 50%;
            padding: 60px;
    }

(3)为其每个div设置样式

 .mian{
        width: 200px;
        height: 300px;
        background-image: url(1.jpg);
        background-position:400px 0;
        position: absolute;
        background: url(aka.jpg);
        border: 1px solid #ccc;
        transition: 2s;
    }
    /* .mian1:hover{
        transform-origin: right;
        transform: rotateY(-60deg);
    } */
    .mian1{
        transform-origin: right;
        transform: translateX(-200px) rotateY(45deg);
        background-position:0 0;
    }

    .mian2{
        background-position: 400px 0;
    }

    .mian3{
        transform-origin: left;
        transform: translateX(200px) rotateY(45deg);
        background-position: 200px 0;
    }

（4）为其设置动画

 .mian3:hover{
        transform: translateX(200px) rotateY(0deg);
    } 
    .mian1:hover{
        transform: translateX(-200px) rotateY(0deg);
    }

1.1.1源码：

1.1.2

1.1.2思路： （1）有五个div，分别放上五个字。

（2）给box和div总体设置样式

 #box{
        margin: 100px auto;
        font-size: 100px;
        color:#005aa0;
        text-align: center;
    }
 .ze1,.ze2,.ze3,.ze4,.ze5{
        display: inline-block;
        width: 90px;
        height: 100%;
        position: relative;
    }

（3）设置伪元素before和after

  
.ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{
        content:attr(data);
        position: absolute;
        color: #ffffff;
        top:0;
        left: 2px;
        transform-origin: left;
        transition: transform .5s;
    }
    .ze1:before{
        content: "前";
    }
    .ze2:before{
        content: "端";
    }
    .ze3:before{
        content: "小";
    }
    .ze4:before{
        content: "学";
    }
    .ze5:before{
        content: "生";
    }
    .ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after {
        position: absolute;
        color: #b3b3b3;
        top:3px;
        left: 10px;
        z-index: -1;
        transform-origin: left;
        transition: transform .5s;
    }
    .ze1:after{
        content: "前";
    }
    .ze2:after{
        content: "端";
    }
    .ze3:after{
        content: "小";
    }
    .ze4:after{
        content: "学";
    }
    .ze5:after{
        content: "生";
    }

（4）为其设置动画

.ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{
        transform: rotateY(-40deg) skewY(10deg);
    }
    .ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{
        transform: rotateY(40deg) skewY(10deg);
    }

1.1.2源码：

1.1.3

1.1.3思路不写，只写源码 1.1.3源码：

持续更新，欢迎大家指教

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52862.html

css3 做一个类似于翻书特效的3D动画

摘要：我们来看下做一个动画需要哪些东西。说明各个属性的作用代表物体距离浏览器是。下面我们做一个向下翻页的数字，和一个向做翻页的数字。我们来看下做一个css3 3D动画需要哪些东西。前面我们已经使用transition和transform做了一些简单的操作。设置3D场景做3D动画，我们首先要设置3D场景。3D场景我们通常用perspective和perspective-origin两个属...

jiekechoo 2019-08-29 16:41 评论0 收藏0
css-3d动画特效

摘要：为其盒子设置样式为其每个设置样式为其设置动画源码书页思路有五个，分别放上五个字。 3D 首先让我们来看一张效果图 1.1.1 showImg(https://segmentfault.com/img/bVbfeDr?w=664&h=557); 属性 perspective ：透距离，单位像素（值越小，透视距离越近，效果越明显）：设置父元素上 perspective-origin: 设置...

microelec 2019-08-29 16:23 评论0 收藏0
移动Web利器transformjs入门

摘要：更别提配合一些运动或者时间的库来编程了。姿势封装了一大堆关键帧动画，开发者只需要关心添加或者移除相关的动画的便可以。简介在过去的两年，越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候，都使用了transformjs，所有必要介绍一下，让更多的人受益，提高编程效率，并享受编程乐趣。（当然transformjs不仅仅支持移动设备，支持CSS3 3D Transforms的...

mrcode 2019-08-30 13:08 评论0 收藏0
移动Web利器transformjs入门

摘要：更别提配合一些运动或者时间的库来编程了。姿势封装了一大堆关键帧动画，开发者只需要关心添加或者移除相关的动画的便可以。简介在过去的两年，越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候，都使用了transformjs，所有必要介绍一下，让更多的人受益，提高编程效率，并享受编程乐趣。（当然transformjs不仅仅支持移动设备，支持CSS3 3D Transforms的...

keithxiaoy 2019-08-20 12:33 评论0 收藏0