【蓝因子教育】CSS3D动画（魔方效果，多重立体图，圆柱效果，齿轮效果）

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

属性

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

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

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

来百度APP畅享高清图片

一、写一个简单的立方体

1.一个长方体有6个面，我们写6个div，并用一个父元素包裹起来。

<div class="mofang"> <div class="box mian1">1</div> <div class="box mian2">2</div> <div class="box mian3">3</div> <div class="box mian4">4</div> <div class="box mian5">5</div> <div class="box mian6">6</div></div>

2.给.mofang设置宽高，并给他设置视距和透视点位置，preserve-3d属性保留子元素3d转换

.mofang{ width: 100px; height: 100px; position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); perspective: 3000px; perspective-origin:-100% -150%; transform-style: preserve-3d;}

注：视距越小图形越大，反之越小

3.子元素全部绝对定位

.box{ width: 100px; height: 100px; text-align: center; line-height: 100px; font-size: 20px; font-weight: bold; border: 2px solid black; position: absolute; }

4.开始调整6个子元素的位置

.mian1{ background: rgba(255, 255, 0, 0.3); transform: translateY(50px) rotateX(90deg);}

效果图如下：

5.一个面写好之后，将其余的面都调整好

/*后*/.mian1{ transform: translateZ(-50px);}/*上*/.mian2{ transform: translateY(-50px) rotateX(90deg);}/*左*/.mian3{ transform: translateX(-50px) rotateY(90deg);}/*前*/.mian4{ transform: translateZ(50px);}/*右*/.mian5{ transform: translateX(50px) rotateY(90deg);}/*下*/.mian6{ transform: translateY(50px) rotateX(90deg);}

效果图如下：

css3D动画可以实现很多效果

下面是我写的一些3D动画效果

demo01

html

<div class="wutai"> <div class="mofang"> <div class="box mian1"> <div class="box1">1</div> <div class="box1">2</div> <div class="box1">3</div> <div class="box1">4</div> <div class="box1">5</div> <div class="box1">6</div> <div class="box1">7</div> <div class="box1">8</div> <div class="box1">9</div> </div> <div class="box mian2"> <div class="box2">1</div> <div class="box2">2</div> <div class="box2">3</div> <div class="box2">4</div> <div class="box2">5</div> <div class="box2">6</div> <div class="box2">7</div> <div class="box2">8</div> <div class="box2">9</div> </div> <div class="box mian3"> <div class="box3">1</div> <div class="box3">2</div> <div class="box3">3</div> <div class="box3">4</div> <div class="box3">5</div> <div class="box3">6</div> <div class="box3">7</div> <div class="box3">8</div> <div class="box3">9</div> </div> <div class="box mian4"> <div class="box4">1</div> <div class="box4">2</div> <div class="box4">3</div> <div class="box4">4</div> <div class="box4">5</div> <div class="box4">6</div> <div class="box4">7</div> <div class="box4">8</div> <div class="box4">9</div> </div> <div class="box mian5"> <div class="box5">1</div> <div class="box5">2</div> <div class="box5">3</div> <div class="box5">4</div> <div class="box5">5</div> <div class="box5">6</div> <div class="box5">7</div> <div class="box5">8</div> <div class="box5">9</div> </div> <div class="box mian6"> <div class="box6">1</div> <div class="box6">2</div> <div class="box6">3</div> <div class="box6">4</div> <div class="box6">5</div> <div class="box6">6</div> <div class="box6">7</div> <div class="box6">8</div> <div class="box6">9</div> </div> </div>

css

<style type="text/css"> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; } .wutai{ width: 100%; height: 100%; border: 1px solid black; /* background: black; */ margin: 0 auto; } .mofang{ width: 100px; height: 100px; /* perspective: 2500px; perspective-origin:-500% -550%; */ transform-style: preserve-3d; animation: texiao 10s linear infinite alternate; } .box{ width: 90px; height: 90px; margin: 100px; text-align: center; line-height: 30px; display: grid; grid-template-columns: 30px 30px 30px; grid-template-rows:30px 30px 30px; position: absolute; } .box .box1{ border: 1px solid white; background: #AACCEE; } .box .box2{ border: 1px solid white; background: #FF9966; } .box .box3{ border: 1px solid white; background: #00FFFF; } .box .box4{ border: 1px solid white; background: #FF0000; } .box .box5{ border: 1px solid white; background: #FFFF00; } .box .box6{ border: 1px solid white; background: blueviolet; } /* 后*/ .mian1{ transform: translateZ(-45px); } /* 左*/ .mian2{ transform: translateX(-45px) rotateY(90deg); } /* 上*/ .mian3{ transform: translateY(-45px) rotateX(90deg); } /* 右*/ .mian4{ transform: translateX(45px) rotateY(90deg); } /* 下*/ .mian5{ transform: translateY(45px) rotateX(90deg); } /* 前*/ .mian6{ transform: translateZ(45px); } @keyframes texiao{ 0%{transform: translate(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 50%{transform: translate(400px) rotateX(0deg) rotateY(360deg) rotateZ(90deg);} 100%{transform: translate(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);} } </style>

魔方效果

demo02

html

<div class="wutai"> <div class="mofang"> <div class="box mian1">1</div> <div class="box mian2">2</div> <div class="box mian3">3</div> <div class="box mian4">4</div> <div class="box mian5">5</div> <div class="box mian6">6</div> <div class="xiaomofang"> <div class="box1 mian7">7</div> <div class="box1 mian8">8</div> <div class="box1 mian9">9</div> <div class="box1 mian10">10</div> <div class="box1 mian11">11</div> <div class="box1 mian12">12</div> </div> </div> </div>

css

<style type="text/css"> .wutai{ width: 700px; height: 500px; border: 1px solid black; background: black; margin: 0 auto; /*******/ perspective: 3000px; perspective-origin:-100% -150%; /******/ } .mofang{ width: 100px; height: 100px; position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); /******/ perspective: 3000px; perspective-origin:-100% -150%; transition: all 500s linear; transform-style: preserve-3d; /******/ } .box{ width: 100px; height: 100px; text-align: center; line-height: 100px; /* color: white; */ font-size: 20px; font-weight: bold; background: rgba(0,0,0,0.5); border: 2px solid black; position: absolute; /******/ transition: all 10s linear; /******/ } .mian1{ transform: translateZ(-50px); } .mian2{ transform: translateY(-50px) rotateX(90deg); } .mian3{ transform: translateX(-50px) rotateY(90deg); } .mian4{ transform: translateZ(50px); } .mian5{ transform: translateX(50px) rotateY(90deg); } .mian6{ transform: translateY(50px) rotateX(90deg); } .xiaomofang{ width: 50px; height: 50px; position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); perspective: 3000px; perspective-origin:-100% -150%; /******/ transform-style: preserve-3d; transition: all 100s linear; /******/ } .box1{ width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 20px; font-weight: bold; background: rgba(255,255,255,0.2); border: 2px solid black; transform-style: preserve-3d; position: absolute; } .xiaomofang .mian7{ transform: translateZ(-27px); } .xiaomofang .mian8{ transform: translateY(-27px) rotateX(90deg); } .xiaomofang .mian9{ transform: translateX(-27px) rotateY(90deg); } .xiaomofang .mian10{ transform: translateZ(27px); } .xiaomofang .mian11{ transform: translateY(27px) rotateX(90deg); } .xiaomofang .mian12{ transform: translateX(27px) rotateY(90deg); } .mofang:hover .mian1{ transform: translateZ(-170px); background: #00FFFF; opacity: 0.7; color: white; } .mofang:hover .mian2{ transform: translateY(-170px) rotateX(90deg); background: #AACCEE; opacity: 0.7; color: white; } .mofang:hover .mian3{ transform: translateX(-170px) rotateY(90deg); background: #DCDCDC; opacity: 0.7; color: white; } .mofang:hover .mian4{ transform: translateZ(170px); background: #FF0000; opacity: 0.7; color: white; } .mofang:hover .mian5{ transform: translateX(170px) rotateY(90deg); background: #FFD700; opacity: 0.7; color: white; } .mofang:hover .mian6{ transform: translateY(170px) rotateX(90deg); background: #FF00FF; opacity: 0.7; color: white; } .mofang:hover{ transform: rotateX(36000deg); } .mofang:hover .xiaomofang{ transform: rotateX(9000deg) rotateY(18000deg) rotateZ(36000deg); } </style>

多重立体图

demo03

html

<div class="wutai"> <div class="yuanzhu"> <div class="box mian1">1</div> <div class="box mian2">2</div> <div class="box mian3">3</div> <div class="box mian4">4</div> <div class="box mian5">5</div> <div class="box mian6">6</div> <div class="box mian7">7</div> <div class="box mian8">8</div> <div class="box mian9">9</div> <div class="box mian10">10</div> <div class="box mian11">11</div> <div class="box mian12">12</div> </div> </div>

css

<style> .wutai{ width: 900px; height: 600px; border: 1px solid; margin: 0px auto; perspective: 1000px; perspective-origin: 50% 1%; } .wutai .yuanzhu{ width: 100px; height: 300px; margin: 0 auto; position: relative; top: 150px; border: 0px solid red; transform-style: preserve-3d; } .yuanzhu:hover{ transform: rotateY(36000000deg); transition: all 1000000s linear; } .wutai .yuanzhu .box{ width: 100px; height:300px; text-align: center; line-height: 300px; font-size: 40px; color: white; position: absolute; } .mian1{ background: red; transform: rotateY(30deg) translateZ(200px) ; } .mian2{ background: orange; transform: rotateY(60deg) translateZ(200px); } .mian3{ background: yellow; transform: rotateY(90deg) translateZ(200px); } .mian4{ background: green; transform: rotateY(120deg) translateZ(200px); } .mian5{ background: cyan; transform: rotateY(150deg) translateZ(200px); } .mian6{ background: blue; transform: rotateY(180deg) translateZ(200px); } .mian7{ background: purple; transform: rotateY(210deg) translateZ(200px); } .mian8{ background: blue; transform: rotateY(240deg) translateZ(200px); } .mian9{ background: cyan; transform: rotateY(270deg) translateZ(200px); } .mian10{ background: green; transform: rotateY(300deg) translateZ(200px); } .mian11{ background: yellow; transform: rotateY(330deg) translateZ(200px); } .mian12{ background: orange; transform: rotateY(360deg) translateZ(200px); } </style>

圆柱效果

demo04

html

<div class="wutai"> <div class="chilun one"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="chilun two"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="chilun3 three"> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> <div class="box1"></div> </div> </div>

css

<style type="text/css"> html,body,div{ margin: 0; padding: 0; } .wutai{ width: 700px; height: 500px; border: 1px solid black; margin: 0 auto; position: relative; } .chilun{ width: 60px; height: 60px; background: black; border-radius: 50%; position: absolute; } .chilun3{ width: 120px; height: 120px; background: black; border-radius: 50%; position: absolute; } .one{ top: 47px; left: 53px; animation: xuanzhuan 1.5s linear infinite; } .two{ top:97px; left: 104px; animation: xuanzhuan2 1.5s linear infinite; } .three{ top: 102px; left: 173px; animation: xuanzhuan3 3s linear infinite; } @keyframes xuanzhuan{ 0%{transform: rotate(0deg);} 100%{transform: rotateZ(360deg);} } @keyframes xuanzhuan2{ 0%{transform: rotate(0deg);} 100%{transform: rotateZ(-360deg);} } @keyframes xuanzhuan3{ 0%{transform: rotate(0deg);} 100%{transform: rotateZ(360deg);} } .box{ width: 16px; height: 80px; background: black; position: absolute; left: calc(50% - 8px); top: calc(50% - 40px); } .box:nth-child(2){ transform: rotateZ(60deg); } .box:nth-child(3){ transform: rotateZ(120deg); } .box1{ width: 16px; height: 140px; background: black; position: absolute; left: calc(50% - 8px); top: calc(50% - 70px); } .box1:nth-child(2){ transform: rotateZ(30deg); } .box1:nth-child(3){ transform: rotateZ(60deg); } .box1:nth-child(4){ transform: rotateZ(90deg); } .box1:nth-child(5){ transform: rotateZ(120deg); } .box1:nth-child(6){ transform: rotateZ(150deg); } </style>

齿轮效果

希望本文对大家有所帮助，学习前端更重要的还是理解原理，希望大家也有更多的创新，加油。返回搜狐，查看更多

责任编辑：