CSS3景深-perspective

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>?</i> </li>
 94             <li> <i>?</i> </li>
 95             <li> <i>?</i> </li>
 96             <li> <i>?</i> </li>
 97             <li> <i>?</i> </li>
 98             <li> <i>?</i> </li>
 99         </ul>
100     </div>
101 </body>
102 </html>

旋转相册:

实现:

  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 </head>
  9 <style>
 10     @keyframes move{
 11         0% {
 12             transform: rotateY(0deg);
 13         }
 14         20% {
 15             transform: rotateY(72deg);
 16         }
 17         40% {
 18             transform: rotateY(144deg);
 19         }
 20         60% {
 21             transform: rotateY(216deg);
 22         } 
 23         80% {
 24             transform: rotateY(288deg);
 25         }     
 26         100% {
 27             transform: rotateY(360deg);
 28         }
 29     }
 30     *{
 31         padding: 0;
 32         margin: 0;
 33     }
 34     body{
 35         position: absolute;
 36         top: 50%;
 37         left: 50%;
 38         background-color: #000;
 39         perspective: 1200px;
 40     }
 41     
 42     ul{
 43         list-style: none;
 44         position:absolute;
 45         width: 400px;
 46         height: 200px;
 47         margin: -100px 0 0 -200px;
 48         transform-style: preserve-3d; 
 49         animation: move 20s linear infinite;
 50         /* transform: rotateX(90deg); */
 51     }
 52     
 53     ul li{
 54         position:absolute;
 55         width: 100%;
 56         height: 100%;
 57         overflow: hidden;
 58         opacity: 0.5;
 59         font-size: 66px;
 60         text-align: center;
 61         line-height: 200px;
 62     }
 63  
 64     ul li img{
 65         width: 100%;
 66         height: 100%;
 67     }
 68 
 69     /* ============================================================== */
 70     
 71     ul li:nth-child(1){
 72         background-color: red;
 73         transform: translateX(600px) rotateY(90deg);
 74     }
 75 
 76     ul li:nth-child(2){
 77         background-color: orange;
 78         transform: translateZ(600px);
 79     }
 80     ul li:nth-child(3){
 81         background-color: yellow;
 82         transform: translateZ(425px) translateX(425px) rotateY(45deg);
 83     }
 84 
 85     ul li:nth-child(4){
 86         background-color: green;
 87         transform: translateZ(425px) translateX(-425px) rotateY(-45deg);
 88     }
 89    
 90     ul li:nth-child(5){
 91         background-color: cyan;
 92         transform: translateZ(-425px) translateX(-425px) rotateY(45deg);
 93     }
 94     
 95     ul li:nth-child(6){
 96         background-color: blue;
 97         transform: translateZ(-425px) translateX(425px) rotateY(-45deg);
 98     }
 99     ul li:nth-child(7){
100         background-color: purple;
101         transform: translateZ(-600px);
102     }
103 
104     ul li:nth-child(8){
105         background-color: white;
106         transform: translateX(-600px) rotateY(-90deg);
107     }
108 
109 
110 </style>
111 <body>
112         <ul>
113             <li></li>
114             <li></li>
115             <li></li>
116             <li></li>
117             <li></li>
118             <li></li>
119             <li></li>
120             <li></li>
121         </ul>
122 
123 </body>
124 </html>

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hjcbcab&title=CSS3景深-perspective

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370809.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【BZOJ4262】Sum 单调栈+线段树

【BZOJ4262】Sum Description Input 第一行一个数 t&#xff0c;表示询问组数。第一行一个数 t&#xff0c;表示询问组数。接下来 t 行&#xff0c;每行四个数 l_1, r_1, l_2, r_2。Output 一共 t 行&#xff0c;每行一个数 Sum。Sample Input 4 1 3 5 7 2 4 6 8 1 1 9 9 9 9 1…

父类一实现serializable_我的java基础学习易错点和易忘点总结(一)

一.继承A:子类只能继承父类所有非私有的成员(成员方法和成员变量)B:子类不能继承父类的构造方法&#xff0c;但是可以通过super关键字去访问父类构造方法。二.继承中构造方法的关系A:子类中所有的构造方法默认都会访问父类中空参数的构造方法B:为什么呢?因为子类会继承父类中的…

深入克隆

在继续克隆概念之前&#xff0c;让我们用对象创建概念刷新基础知识。 使用new运算符创建对象时&#xff0c;对象将在堆中获取内存分配。 堆中的对象创建 在Java中&#xff0c;理想情况下仅通过引用变量修改对象&#xff0c;即仅复制对象的内存地址&#xff0c;因此原始对象中…

索引和未索引执行计划的比较_详解Oracle复合索引+实例说明

复合索引复合索引顾名思义&#xff0c;区别于单列索引&#xff0c;是由两个或多个列一起构成的索引。其在B树上的数据结构是什么样&#xff1f;如下图&#xff0c;是一个包含两列的复合索引。如果你观察仔细&#xff0c;还会发现它的叶子节点是ASC递增排序的。现根据第一个值排…

Datables使用总结

本文共四部分&#xff1a;官网 | 基本使用|遇到的问题|属性表 一&#xff1a;官方网站&#xff1a;[http://www.datatables.net/] 二&#xff1a;基本使用&#xff1a;[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { …

用方面清理代码

在我以前的文章中&#xff0c;我描述了字母转换&#xff0c;并且提到了我们使用AspectJ解决了该任务&#xff0c;但是我没有提及AspectJ的工作原理以及一般性的方面。 因此&#xff0c;在接下来的几行中&#xff0c;我将解释&#xff1a; 什么是面向方面的编程&#xff0c;为什…

原型 - 实现自己的jQuery

每个第一次使用jq的开发者都感到惊叹,jq的$太神奇了,究竟是怎么做到的使用$控制dom 赞叹前人之余,探究其本源才是前端开发者应该做的事,社区常常说,不要重复造轮子, 可是啊,连轮子都造不出来,又怎么去了解在什么环境下用什么轮子,怎么样才可以造成更加优秀的轮子, 不同阶段对…

server.transfer 无法跳转页面_H5 腾讯地图无法导航

uni-app 打包H5腾讯地图无法导航前言&#xff1a;最近几天用uni-app开发安卓和iOS应用&#xff0c;打包成APP安装包后&#xff0c;APP内做地图导航没有问题&#xff0c;APP内使用的是高德地图&#xff1b;但是打包成为H5页面后&#xff0c;运行在微信内置浏览器或者运行在第三方…

打破PermGen神话

在我的最新文章中&#xff0c;我解释了可能导致java.lang.OutOfMemoryError&#xff1a;PermGen空间崩溃的原因 。 现在该讨论该问题的可能解决方案了。 或者&#xff0c;更确切地说&#xff0c;是关于互联网对可能解决方案的建议。 不幸的是&#xff0c;我只能说&#xff0c;我…

android 弹出弹框2秒消失_基于HTML5 Canvas 实现弹出框

前言用户鼠标移入时&#xff0c;有弹出框出现&#xff0c;这样的需求很常见。这在处理 HTML 元素实现时简单&#xff0c;但是如果是对 HTML5 Canvas 构成的图形进行处理&#xff0c;这种方法不再适用&#xff0c;因为 Canvas 使用的是另外一套机制&#xff0c;无论在 Canvas 上…

【CSS】小妙招,各种问题总结方法处理

1.实现div文字溢出自动省略号截取 overflow:hidden; /*超过部分不显示*/       text-overflow:ellipsis; /*超过部分用点点表示*/       white-space:nowrap;/*不换行*/ 2.规定行数的截取效果 text-overflow: ellipsis; /*有些示例里需要定义该属性&#xff0c…

Java2Days 2012:Java EE

Java2Days会议是东欧的主要活动&#xff0c;目的是介绍Java开发的最新趋势。 今年&#xff0c;该活动于10月25日至26日在保加利亚的索非亚举行。 我在那里&#xff0c;并有机会与一些SAP的同事一起品尝了一些最新的Java&#xff0c;云和移动内容&#xff0c;这些内容已直接发送…

c++ 优先队列_C/C++数据结构:队列结构最全解析!带你零基础入门队列结构

前言上一章节针对于C语言栈结构做了解析&#xff0c;不清楚的可以回顾一下。本章节主要针对于C语言的基础数据结构队列做以解析。数据结构之队列队列是一种特殊的 线性表 &#xff0c;特殊之处在于它只允许在表的前端&#xff08;front&#xff09;进行删除操作&#xff0c;而在…

周期均方根和有效值的区别_黑猪肉和白猪肉有啥区别?

为啥散养黑猪肉的价格要比白猪贵很多?这其中的原因不看不知道!市面上的散养黑猪肉通常要比白猪肉贵很多&#xff0c;但是仍有不少人喜欢买黑猪肉回家吃&#xff0c;散养黑猪肉和白猪肉不仅仅是口感上有所差距&#xff0c;其价值差距体现在很多方面&#xff0c;接下来小编就和大…

测试环境搭建流程_前端构建 DevOps 搭建 DevOps 基础平台(中)

前言搭建基础平台搭建上篇的时候的时候&#xff0c;已经介绍过了项目流程设计、数据库搭建、jwt 登录等模块。此篇我们介绍分支管理设计及其他的基础模块。后端模块DevOps - Gitlab Api使用(已完成&#xff0c;点击跳转)DevOps - 搭建 DevOps 基础平台(已完成 50%)基础平台搭建…

什么是PermGen泄漏?

接下来是对Java应用程序中特定类型的内存问题的实用介绍。 即–我们将分析导致java.lang.OutOfMemoryError&#xff1a;PermGen空间的错误 堆栈跟踪中的症状。 首先&#xff0c;我们将介绍理解该主题所需的核心概念&#xff0c;并说明什么是对象&#xff0c;类&#xff0c;类…

rto净化效率计算公式_全面剖析 石油化工行业RTO蓄热式焚烧炉的优势要素

在我国的国民经济发展中&#xff0c;石油化工产业是重要的能源基础工业&#xff0c;但是废气的治理问题一直困扰着许多企业。直到RTO蓄热式焚烧炉的面世&#xff0c;为石油化工行业的废气治理带来了新希望。如今&#xff0c;有机废气治理工作越来越受到广泛重视&#xff0c;传统…

python作业:高级FTP程序

要求&#xff1a; 用户加密认证允许同时多用户登录每个用户有自己的家目录 &#xff0c;且只能访问自己的家目录对用户进行磁盘配额&#xff0c;每个用户的可用空间不同允许用户在ftp server上随意切换目录允许用户查看当前目录下文件允许上传和下载文件&#xff0c;保证文件一…

webpack学习笔记 (一)

一、安装nodejs&#xff1b; 点击打开nodejs官方站点&#xff1b; 点击下图框住的按钮&#xff0c;下周nodejs安装包&#xff1b; 安装下载好的安装包。 安装完毕之后&#xff0c;在cmd中输入node -v查看是否已经安装成功 如果有版本号显示&#xff0c;则代表安装成功&#xf…

将涡轮增压器添加到JEE Apps

我扮演的关键角色之一是在本地社区中传播Akka。 作为讨论的一部分&#xff0c;人们通常会想到的问题/疑问是Akka如何针对编写良好的Java / JEE应用程序提供更好的可伸缩性和并发性。 由于底层硬件/ JVM保持不变&#xff0c;因此参与者模型如何比传统的JEE应用程序发挥更多的功…