CSS3景深-perspective

程序员文章站 2022-03-06 10:21:02

3D视图正方体：旋转相册：实现： ......

3d视图正方体：

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="utf-8">
  5     <title>css3景深-perspective</title>
  6 </head>
  7 <style>
  8     #div1{
  9         position: relative;
 10         width: 500px;
 11         height: 500px;
 12         perspective: 1000px; /* 景深 面的 (宽+高)*2 */
 13         background-color: #123456;
 14     }
 15     #div1 ul{
 16         transform-origin: 50% 50%; /* 旋转中心 */
 17         position: absolute;
 18         left: 50%;
 19         top: 50%;
 20         width: 250px;
 21         height: 250px;
 22         transform-style: preserve-3d; /* 设置3d属性让子元素三维空间呈现 */
 23         list-style: none;
 24         margin: -125px 0 0 -125px;
 25         padding: 0;
 26         font-size: 120px;
 27         animation: move 6s linear infinite; /* 动画效果 */
 28         /*border: 10px solid #000;*/
 29         /*box-sizing: border-box;*/
 30     }
 31     #div1 ul li{
 32         width: 100%;
 33         height: 100%;
 34         position: absolute;
 35         opacity: 0.8;
 36         box-sizing: border-box;
 37         border: 10px solid orange;
 38     }
 39     #div1 ul li i{
 40         position: absolute;
 41         font-style: normal;
 42         top: 50%;
 43         left: 50%;
 44         transform:translate(-50%,-50%);
 45         background-color: #fff;
 46     }
 47     #div1 ul li:nth-child(1){
 48         background-color: red;
 49         transform: translatex(-125px) rotatey(90deg);
 50     }
 51     #div1 ul li:nth-child(2){
 52         background-color: green;
 53         transform: translatex(125px) rotatey(-90deg);
 54     }
 55     #div1 ul li:nth-child(3){
 56         background-color: yellow;
 57         transform: translatey(-125px) rotatex(90deg);
 58     }
 59     #div1 ul li:nth-child(4){
 60         background-color: black;
 61         transform: translatey(125px) rotatex(-90deg);
 62     }
 63     #div1 ul li:nth-child(5){
 64         background-color: pink;
 65         transform: translatez(-125px);
 66     }
 67     #div1 ul li:nth-child(6){
 68         background-color: blue;
 69         transform: translatez(125px);
 70     }
 71     @keyframes move{
 72         0% {
 73             transform: rotatex(0deg);
 74         }
 75         25% {
 76             transform: rotatex(180deg);
 77         }
 78         50% {
 79             transform: rotatex(360deg) rotatey(0deg);
 80         }
 81         75% {
 82             transform: rotatex(360deg) rotatey(180deg);
 83         }       
 84         100% {
 85             transform: rotatex(360deg) rotatey(360deg);
 86         }
 87     }
 88     /*==================================================================*/
 89 </style>
 90 <body>
 91     <div id="div1">
 92         <ul>
 93             <li> <i>

打赏

微信扫一扫

动手实现react Modal组件

Modal组件长话不多说，接下来让我们来动手实现一个react Modal组件。我们先来看一下 "实际效果" Modal的布局首先，让我们先思... [阅读全文]
Linux安装Python3后，如何使用pip命令

系统环境：CentOS7.4 已安装好Python3.6.5 Python3.6.5自带pip 使用pip安装第三方库，可运行指令，例如安装para... [阅读全文]
building for production...Killed

npm run build报错原理按照他人的说法是，服务器内存不够用了，这样就给他配置一个单独的内存出来就解决了解决方法 sudo /bin/... [阅读全文]
js知识梳理1:理解对象的属性特性

写在前面注：这个系列是本人对js知识的一些梳理，其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版，... [阅读全文]
react-native使用redux 存在的坑

前几天安卓真机测试的时候，突然发现一个严重的问题。后退两次退出应用，再开启白屏。而杀掉进程后再开启就是好的。这个重大bug我跟了好久，以为是sp... [阅读全文]