css实现3d动画特效的代码实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css实现3d动画特效的代码实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8924字，纯文字阅读大概需要13分钟。

内容图文

本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

1.1.1

css实现3d动画特效的代码实例 - 文章图片

属性

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

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

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

1.1.1思路

（1）有三个p，一起放到一个盒子里面。

  <p class="container">
            <p class="cube">
                <p class="mian mian1"></p>
                <p class="mian mian2"></p>
                <p class="mian mian3"></p>
            </p>
        </p>

（2）为其盒子设置样式

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

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

 .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源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>书页</title>
    <style>
        .container{
            width: 1000px;
            height: 650px;
     
            perspective: 2000px;
            border: 1px solid transparent;
            overflow: hidden;
            margin: 0 auto;
            perspective-origin: 10% 20%;
           
        }
    
        .cube{
            width: 200px;
            height: 300px;
            transform-style: preserve-3d;
            margin:100px auto;
           
            position: relative;
            transform: rotateX(30deg);
            border-radius: 50%;
            padding: 60px;
        }
        .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;
        }
        .mian3:hover{
            transform: translateX(200px) rotateY(0deg);
        } 
        .mian1:hover{
            transform: translateX(-200px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <p class="container">
        <p class="cube">
            <p class="mian mian1"></p>
            <p class="mian mian2"></p>
            <p class="mian mian3"></p>
        </p>
    </p>
</body>
</html>

1.1.2

css实现3d动画特效的代码实例 - 文章图片

1.1.2思路：

（1）有五个p，分别放上五个字。

  <p id="box">
        <p class="ze1">前</p>
        <p class="ze2">端</p>
        <p class="ze3">小</p>
        <p class="ze4">学</p>
        <p class="ze5">生</p>
    </p>

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

 #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源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态字</title>
    <style>
        #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;
        }
        .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: "生";
        }
        .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);
        }
    </style>
</head>
<body>
    <p id="box">
        <p class="ze1">前</p>
        <p class="ze2">端</p>
        <p class="ze3">小</p>
        <p class="ze4">学</p>
        <p class="ze5">生</p>
    </p>
</body>
</html>

1.1.3思路不写，只写源码

1.1.3源码：

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3d动画</title>
   
    <style>
    body{
    margin: 0;   
    background:url(iom.jpg) ; 
    background-size:100%;
    position: relative;
}

.box{
    width:430px;
    height: 430px;
    position: absolute;;
    top:100px;
    left: 480px;
    border: 1px solid #ccc;
    border-radius: 215px;
    text-align: center;
    animation: dong 20s infinite linear;
   
}

.ai{
    width:10px;
    height: 10px;
    background: #0c0;
    border-radius: 5px;
    position: absolute;
    right:38px;
    top: 340px;
}

@keyframes dong{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.mrin{
    width:320px;
    height: 320px;
    border:1px solid #ccc;
    border-radius: 180px;
    position: absolute;
    top:155px;
    left: 535px; 
    animation: mi 15s infinite linear;
}

.ak{
    width:50px;
    height: 50px;
    border: 1px solid #ccc;
    margin: 20px 0 0 20px;
    border-radius: 25px;
    display: inline-block;
    animation: ol 5s infinite linear;
}

.ak .sj1{
    width:10px;
    height:10px;
    border-radius: 5px;
    margin:20px 0 0 20px;
    background: blue;
}

.ak .sj2{
    width: 10px;
    height: 10px;
    margin-top:5px;
    background: #fff;
    border-radius: 5px;
}


@keyframes mi{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}



@keyframes ol{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.mian{
    width: 240px;
    height: 240px;
    border:1px solid #ccc;
    position: absolute;
    border-radius: 120px;
    top:195px;
    left:575px;
    animation: af 5s infinite linear;
}


.mian .ap{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #f0f;
    margin:30px 0 0 30px; 

}


@keyframes af{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.chen{
    width: 160px;
    height: 160px;
    border: 1px solid #ccc;
    position: absolute;
    border-radius: 80px;
    top:235px;
    left:615px;
    animation: oa 4s infinite linear;
}


.ze{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #0c0;
    margin: 20px 0 0 15px;
}


@keyframes oa{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}

.yu{
    width: 80px;
    height: 80px;
    background-color:darkorange;
    border-radius: 40px;
    position: absolute;
    top:275px;
    left:655px;
    opacity: .7;
}
    
    </style>
</head>
<body>
    <p class="box">
        
        <p class="ai"></p>
    </p>
        <p class="mrin">
            <p class="ak">
                <p class="sj1"></p>
                <p class="sj2"></p>
            </p>  
               
            
        </p>
            <p class="mian">
                <p class="ap"></p>
            </p>
                <p class="chen">
                    <p class="ze"></p>
                    </p>
                        <p class="yu"></p>
                   
                
         
      
    

</body>
</html>

.ak .sj2{
    width: 10px;
    height: 10px;
    margin-top:5px;
    background: #fff;
    border-radius: 5px;
}


@keyframes mi{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}



@keyframes ol{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.mian{
    width: 240px;
    height: 240px;
    border:1px solid #ccc;
    position: absolute;
    border-radius: 120px;
    top:195px;
    left:575px;
    animation: af 5s infinite linear;
}


.mian .ap{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #f0f;
    margin:30px 0 0 30px; 

}


@keyframes af{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}


.chen{
    width: 160px;
    height: 160px;
    border: 1px solid #ccc;
    position: absolute;
    border-radius: 80px;
    top:235px;
    left:615px;
    animation: oa 4s infinite linear;
}


.ze{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #0c0;
    margin: 20px 0 0 15px;
}


@keyframes oa{
    0%{
        transform:rotate(0deg)
    }

    100%{
        transform:rotate(720deg)
    }
}

.yu{
    width: 80px;
    height: 80px;
    background-color:darkorange;
    border-radius: 40px;
    position: absolute;
    top:275px;
    left:655px;
    opacity: .7;
}
    
    </style>
</head>
<body>
    <p class="box">
        
        <p class="ai"></p>
    </p>
        <p class="mrin">
            <p class="ak">
                <p class="sj1"></p>
                <p class="sj2"></p>
            </p>  
               
            
        </p>
            <p class="mian">
                <p class="ap"></p>
            </p>
                <p class="chen">
                    <p class="ze"></p>
                    </p>
                        <p class="yu"></p>
                   
                
         
      
    

</body>
</html>

内容总结

以上是互联网集市为您收集整理的css实现3d动画特效的代码实例全部内容，希望文章能够帮你解决css实现3d动画特效的代码实例所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/411647.html

来源：【匿名】

【上一篇】img标签设置display:block属性时宽度无法设定为100%的解决办法【下一篇】php无法调用css怎么办

更多 ►

【css实现3d动画特效的代码实例】教程文章相关的互联网学习教程文章

这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。本文介绍的是一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：效果图如下：HTML代码：<p class="light"><img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500...

css怎么设置边框的虚线样式？（代码实例）【图】

在网页布局中，有时为了整体网页的美观，我们需要设置不同的边框样式。那么怎么设置边框的虚线样式？本篇文章就给大家介绍css设置边框虚线样式的两种方式。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。首先要知道在css中我们是使用border属性来设置边框的，它可以通过设置边框的宽度、颜色、圆角度、样式（实线、虚线、双线等等）。下面我们通过简单的代码示例来具体看看css的border边框属性是怎么设置边框虚线...

css3实现把图片画到画布上（代码实例）【图】

本文给大家介绍把图片画到画布上的方法，适应PC和移动端使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。画一张图片到画布上<canvas id="myCanvas" width="1000px" height="200px" >您的浏览器不支持canvas标签。</canvas>var canvas = document.getElementById("myCanvas"); //获取画笔 var ctx=canvas.getContext(2d); //声明Image对象 var img=new Image(); //获取img路径 img.src="img/num.png"; //把...

css如何添加阴影边框（代码实例）【图】

css如何设置边框阴影？很多人遇到这类问题都不知道怎么处理，其实利用css加边框也是简单的，下面我们来看一下如何利用css添加阴影边框。一：css阴影边框使用语法：1.属性：box-shadow2.使用方法：div{box-shadow:0 0 1px #000 inset;}3.阴影使用方法分析：第一个零代表距离对象左边距离为0，并且开始显示阴影，第二个零表示距离对象上间距对象为0，就开始显示阴影，1px表示阴影的范围1px，#000代表着阴影的颜色，inset表示对象内阴...

css中什么是ul（列表样式）？ul的使用方法（代码实例）【图】

本章给大家介绍css中什么是ul（列表样式）？ul的使用方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。CSS列表属性作用如下：设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像一、列表在HTML中，有两种类型的列表：无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 - 列表项的标记有数字或字母使用CSS，可以列出进一步的样式，并可用图像作列表...

css实现凸字形状的代码实例【图】

本篇文章给大家带来的内容是关于css实现凸字形状的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。昨天看到有人想做凸字型框，今天用几分钟做了一下，发现还蛮巧妙的，分享一下最终效果如下所示代码在这儿： <div class="box"><span class="big"></span><span class="top"></span><span class="topR"></span></div>body {display: flex;justify-content: center;align-items: center;.box {position:...

CSS中Table（表格）样式是如何设置？（代码实例）【图】

本章给大家介绍CSS中Table（表格）样式是如何设置？（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、表格边框border 指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框：table, th, td { border: 1px solid black; }请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框，使用 border-collapse属性。二、折叠...

CSS3实现字体发光效果（代码实例）【图】

本文给大家介绍CSS3如何实现字体发光效果（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。text-shadow该属性为文本添加阴影效果text-shadow: h-shadow v-shadow blur color;h-shadow: 水平阴影的位置(阴影水平偏移量)，可为负值，必需v-shadow: 垂直阴影的位置(阴影垂直偏移量)，可为负值，必需blur: 阴影模糊的距离(默认为0)，可选color: 阴影颜色(默认为当前字体颜色)，可选乍一看，text-shadow...

DIVCSS3text-shadow字体阴影（代码实例）

本篇文章给大家带来的内容是关于DIV CSS3 text-shadow字体阴影（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、CSS3单词与语法1、CSS3单词：text-shadow2、语法结构p{text-shadow:5px 2px 6px #000;}设置p盒子里文字阴影效果距离左5px和距离上2px开始显示阴影效果，同时阴影大小范围为6px，阴影颜色为黑色（#000）。3、说明文字显示阴影效果共4个值，第一个代表距离左多少距离开始显示阴影效果，...

h5+css3实现图片飞入和淡入淡出效果的代码实例

正如很多小伙伴们所知道的，楼主最近在开发移动端的响应式布局的自适应页面了，现在分享一个刚写完的小demohtml:<!doctype html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><meta name=apple-mobile-web-app-capable content=yes /><meta name="format-detection" content="telephone=no" /><meta http-equiv=Content-Type...

css如何使用利用border和border-radius绘制一些小图形（代码实例）【图】

在页面开发中，常常需要一些小图形来美化页面。这些图形可以用图片形式展现，但页面每次加载图片需要花费时间，那么用css如何实现这些图形？本章就给大家介绍css如何使用利用border和border-radius绘制一些小图形（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。大都知道border属性有四个参数，那么border－radius必然也是有四个参数我们知道border属性的四个参数分别是border-top,border-right,b...

使用Jquery和CSS实现选择框重置按钮（代码实例）【图】

如何实现一种在选择框上创建重置按钮而不显示选择框的简单方法？本篇文章就来给大家分享使用Jquery和CSS实现选择框重置按钮的方法（代码），有需要的朋友可以参考一下。代码如下：HTML<select><option value="">Select a color..</option><option value="red">Red</option><option value="green">Green</option><option value="blue">Blue</option> </select> <div class="displaySelect"><span class="value"></span><span class=...

如何利用javascript函数添加css样式代码实例详解

先给出函数。 varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"){//增加自动转换透明度功能，用户只需输入W3C的透明样式，它会自动转换成IE的透明滤镜 vart=cssCode.match(/opacity:(d?.d+);/); if(t!=null){ cssCode=cs...

javascript控制css样式所有样式代码实例汇总

记录一下JS控制CSS所使用的方法. 使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style>你想要改变把他的display属性由none改为inline。解决办法：在IE里： document.styleSheets[0].rules[0].style.display = "inline";在firefox里： document.styleSheets[0].cssRules[0].style.display = "inline";讨论：可以做一个函数来搜索特定名字的style对象： function getstyle(s...

jquery+css实现Tab栏切换的代码实例【图】

前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。最终要实现的效果图如下：（1）点击tab栏显示对应的内容，并且tab栏样式变化。实现方式：一般tab栏如果要做成比较好看的样式，会切两张图作为背景，一张用于选中时的背景，一张用于未选中的背景。这里为了简单，只用css设置样式。然后为每个tab绑定click事件，当触发...

首页 / CSS / css实现3d动画特效的代码实例

css实现3d动画特效的代码实例

内容导读

内容图文

1.1.1

属性

1.1.1思路

（1）有三个p，一起放到一个盒子里面。

（2）为其盒子设置样式

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

（4）为其设置动画

1.1.1源码：

1.1.2

1.1.2思路：

（1）有五个p，分别放上五个字。

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

（3）设置伪元素before和after

（4）为其设置动画

1.1.2源码：

1.1.3思路不写，只写源码

1.1.3源码：

内容总结

内容备注

内容手机端

【css实现3d动画特效的代码实例】教程文章相关的互联网学习教程文章

CSS - 相关标签

实例 - 相关标签

CSS - 技术教程分类

CSS - 最新教程

CSS - 最热教程