当前位置：Gxlcms > css > css3D+动画的例子（附完整代码）

css3D+动画的例子（附完整代码）

时间：2021-07-01 10:21:17 帮助过：637人阅读

本篇文章给大家带来的内容是关于css3D+动画的例子（附完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

前言

最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。

写一个简单的立方体

1、我们先用css实现一个长方体，一个长方体有6个边，我们写6个li，并用一个ul包裹起来,根据我写3D动画的经验，最好有一个父元素来包裹

  1. <p class="parent">
  2.     <ul>
  3.         <li>1</li>
  4.         <li>2</li>
  5.         <li>3</li>
  6.         <li>4</li>
  7.         <li>5</li>
  8.         <li>6</li>
  9.     </ul>
  10. </p>

2、先给.parent设置宽高，并且给他设置视距和基点位置。

  1. .parent{
  2.             width: 800px;
  3.             height: 400px;
  4.             border: 1px solid #000;
  5.             margin: 0 auto;
  6.             perspective: 2000px;
  7.             perspective-origin: -40% -80%;
  8.             background: #000;
  9.         }

3、给ul设置宽高以及preserve-3d属性保留子元素3d转换，子元素li全部绝对定位

  1.         ul{
  2.             width: 50px;
  3.             position: relative;
  4.             margin: 100px auto;
  5.             transform-style : preserve-3d;
  6.         }
  7.          li{
  8.             width: 100px;
  9.             height: 100px;
  10.             background:  rgba(255, 255, 0, 0.3);
  11.             position: absolute;
  12.             text-align: center;           
  13.             border: 3px solid greenyellow;
  14.         }

效果如下图所示：

1462673038-5b70e99d5d54c_articlex.png

4、先写一个面，给他的背景设置 background: rgba(255, 255, 0, 0.3);

  1.  li:nth-child(1){
  2.             background:  rgba(255, 255, 0, 0.3);
  3.             transform:  translateY(50px) rotateX(90deg);
  4.         }

效果如下图所示：

3369746211-5b70e940019a9_articlex.png

5、我们写好了第一个面，然后我们在将其他6个面调整好，变成下图所示。关于rotate的旋转方向这里不解释，不懂的朋友可以自行查看其他文档。

  1.         /*上面*/
  2.          li:nth-child(1){
  3.             transform: translateY(-50px) rotateX(90deg);
  4.         } 
  5.         /*下面*/
  6.         li:nth-child(2){
  7.         
  8.             transform:  translateY(50px) rotateX(90deg);
  9.         }
  10.         /*左面*/
  11.         li:nth-child(3){
  12.             transform: translateX(-50px) rotateY(90deg);
  13.         }
  14.         /*右面*/
  15.         li:nth-child(4){
  16.             transform: translateX(50px) rotateY(90deg);
  17.         }
  18.         /*前面*/
  19.         li:nth-child(5){
  20.             transform: translateZ(50px);
  21.         }
  22.         /*后面*/
  23.         li:nth-child(6){
  24.             transform: translateZ(-50px);
  25.         }

效果如下图所示：

1056950737-5b70eb243e4ca_articlex.png

下面是两种css3D+动画的效果

1、代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>书页2</title>
  8.     <style>
  9.         .container{
  10.             width: 1000px;
  11.             height: 650px;
  12.             background: #000;
  13.             perspective: 2000px;
  14.             border: 1px solid transparent;
  15.             overflow: hidden;
  16.             margin: 0 auto;
  17.             perspective-origin: 10% 20%;
  18.            
  19.         }
  20.     
  21.         .cube{
  22.             width: 200px;
  23.             height: 300px;
  24.             transform-style: preserve-3d;
  25.             margin:100px auto;
  26.             
  27.             position: relative;
  28.             transform: rotateX(30deg);
  29.             border-radius: 50%;
  30.             padding: 60px;
  31.         }
  32.         .mian{
  33.             width: 200px;
  34.             height: 300px;
  35.             background-image: url(1.jpg);
  36.             background-position:400px 0;
  37.             position: absolute;
  38.            
  39.             border: 1px solid #ccc;
  40.             transition: 2s;
  41.         }
  42.         /* .mian1:hover{
  43.             transform-origin: right;
  44.             transform: rotateY(-60deg);
  45.         } */
  46.         .mian1{
  47.             transform-origin: right;
  48.             transform: translateX(-200px) rotateY(45deg);
  49.             background-position: 0 0;
  50.         }
  51.         .mian3{
  52.             transform-origin: left;
  53.             transform: translateX(200px) rotateY(45deg);
  54.             background-position: 200px 0;
  55.         }
  56.         .mian3:hover{
  57.             transform: translateX(200px) rotateY(0deg);
  58.         } 
  59.         .mian1:hover{
  60.             transform: translateX(-200px) rotateY(0deg);
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  65.     <p class="container">
  66.         <p class="cube">
  67.             <p class="mian mian1"></p>
  68.             <p class="mian mian2"></p>
  69.             <p class="mian mian3"></p>
  70.         </p>
  71.     </p>
  72. </body>
  73. </html>

2、代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>立方体</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.             list-style: none;
  13.         }
  14.         .parent{
  15.             width: 1000px;
  16.             margin:  0 auto;
  17.             height: 600px;
  18.             background: black;
  19.             perspective: 5000px;
  20.             perspective-origin: -40% -120%;
  21.             border: 1px solid #000;
  22.         }
  23.         ul{
  24.             width: 100px;
  25.             height: 300px;
  26.             position: relative;
  27.             margin:100px auto;
  28.             transform-style: preserve-3d;
  29.             animation: zuan 3s linear infinite;
  30.             border: 1px solid greenyellow;
  31.         }
  32.         li{
  33.             width: 100px;
  34.             height: 300px;
  35.             background:  rgba(0, 0, 0, 0.5);
  36.             position: absolute;
  37.             text-align: center;
  38.             line-height: 100px;
  39.             
  40.             border: 3px solid greenyellow;
  41.         }
  42.         li:nth-child(1){
  43.             transform: rotateY(30deg) translateZ(-200px);
  44.       
  45.         }
  46.         li:nth-child(2){
  47.             transform: rotateY(60deg) translateZ(-200px);
  48.             background:  rgba(255, 0, 0, 0.5);
  49.         }
  50.         li:nth-child(3){
  51.             transform: rotateY(90deg) translateZ(-200px);
  52.             
  53.         }
  54.         li:nth-child(4){
  55.             transform: rotateY(120deg) translateZ(-200px);
  56.             background:  rgba(0, 0, 255, 0.5);
  57.         }
  58.         li:nth-child(5){
  59.             transform: rotateY(150deg) translateZ(-200px);
  60.             
  61.         }
  62.         li:nth-child(6){
  63.             transform: rotateY(180deg) translateZ(-200px);
  64.             background:  rgba(255, 0, 255, 0.5);
  65.         }
  66.         li:nth-child(7){
  67.             transform: rotateY(210deg) translateZ(-200px);
  68.       
  69.         }
  70.         li:nth-child(8){
  71.             transform: rotateY(240deg) translateZ(-200px);
  72.             background:  rgba(0, 255, 0, 0.5);
  73.         }
  74.         li:nth-child(9){
  75.             transform: rotateY(270deg) translateZ(-200px);
  76.       
  77.         }
  78.         li:nth-child(10){
  79.             transform: rotateY(300deg) translateZ(-200px);
  80.             background:  rgba(0, 255, 255, 0.5);
  81.         }
  82.         li:nth-child(11){
  83.             transform: rotateY(330deg) translateZ(-200px);
  84.       
  85.         }
  86.         li:nth-child(12){
  87.             transform: rotateY(360deg) translateZ(-200px);
  88.             background:  rgba(255, 255, 255, 0.5);
  89.         }
  90.         @keyframes zuan{
  91.             0%{
  92.                 transform: rotateY(0deg);
  93.             }
  94.             100%{
  95.                 transform: rotateY(360deg);
  96.             }
  97.         }
  98.     
  99.     </style>
  100. </head>
  101. <body>
  102.     <p class="parent">
  103.         <ul>    
  104.             <li></li>
  105.             <li></li>
  106.             <li></li>
  107.             <li></li>
  108.             <li></li>
  109.             <li></li>
  110.             <li></li>
  111.             <li></li>
  112.             <li></li>
  113.             <li></li>
  114.             <li></li>
  115.             <li></li>
  116.         </ul>
  117.     </p>
  118.     
  119. </body>
  120. </html>

效果如下图：

2298908657-5b70eed2d024b_articlex.gif

相关推荐：

网页加载时样式效果css如何实现？（多种样式示例）

如何使用纯CSS实现一个微笑打坐的小和尚

字体加阴影效果怎么用css属性实现？（代码演示）

以上就是css3D+动画的例子（附完整代码）的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！