主要记录两个css3 3D转换的示例

 

㈠哆啦A梦

三个哆啦A梦的图片，分别让其围绕X轴，Y轴，Z轴旋转60度，鼠标放上开始发生变化。

具体代码如下图所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>3d变换</title>

     <style type="text/css">

         #stage{

             width: 910px;

             margin:100px auto;

             perspective:100px;

         }

         .box{

             width:300px;

             height: 327px;

             float: left;

             transition:linear 1s;

             transition-style:preserve-d;

         }

         img{

             width:300px;

             height: 327px;

         }

         .x:hover{

             transform:rotateX(60deg);

         }

         .y:hover{

             transform:rotateY(60deg);

         }

         .z:hover{

             transform:rotateZ(60deg);

         }

     </style>

 </head>

 <body>

     <div id="stage">

         <div class="box x">

             <img src="图片/A.jpg"/>

         </div>

         <div class="box y">

             <img src="图片/A.jpg"/>

         </div>

         <div>

         <div class="box z">

                 <img src="图片/A.jpg"/>

         </div>

     </div>

 </body>

 </html>

 

效果如下所示：

⑴鼠标放在第一个图片效果如下：

 

 

⑵鼠标放在第二个图片效果如下：

⑶鼠标放在第三个图片效果如下：

 

㈡纯HTML+CSS制作的旋转的立方体

一个名为“坚持就是胜利”的旋转立方体，代码如下;

 <!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>

     *{

         margin:0;

         padding:0;

     }

     body{

         background: #222;

     }

     div.wrap{

         width:200px;

         perspective: 1000px;

         position: absolute;

         top:50%;

         left:50%;

         transform:translateX(-50%) translateY(-50%);

     }

     .cube{

         width:200px;

         height: 200px;

         position: relative;

         transform-style:preserve-3d;

         transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);

         animation: move 20s infinite linear;

     }

     .cube>div{

         width:100%;

         height:100%;

         background:black;

         position: absolute;

         box-shadow:0 0 10px currentColor;

         font-size: 50px;

         text-align: center;

         line-height: 200px;

     }

     .cube:hover>div{

         background: currentColor;

         box-shadow: 0 0 30px currentColor;

     }

     .cube .out-front{

         transform: translateZ(100px);

         color:deeppink;

     }

     .cube .out-back{

         transform: translateZ(-100px) rotateY(-180deg);

         color:seagreen;

     }

     .cube .out-left{

         transform: translateX(-100px) rotateY(-90deg);

         color:skyblue;

     }

     .cube .out-right{

         transform: translateX(100px) rotateY(90deg);

         color:lightcoral;

     }

     .cube .out-top{

         transform: translateY(-100px) rotateX(90deg);

         color:lightslategrey;

     }

     .cube .out-bottom{

         transform: translateY(100px) rotateX(-90deg);

         color:gold;

     }

     @keyframes move{

         0%{

             transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

         }

         100%{

             transform: rotateX(360deg) rotateY(720deg) rotateZ(720deg);

         }

         /*from 和 to 也可以*/

     }

     </style>

 </head>

 <body>

     <div class="wrap">

         <div class="cube">

             <div class="out-front">就</div>

             <div class="out-back">坚</div>

             <div class="out-left">持</div>

             <div class="out-right">胜</div>

             <div class="out-top">利</div>

             <div class="out-bottom">是</div>

         </div>

     </div>

 </body>

 </html>

部分效果图如下：

★ 以上代码的部分解释：

X-UA-Compatible：X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。

IE=edge告诉IE使用最新的引擎渲染网页。

通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。

currentColor：当前的文字颜色。具体内容可以参考以下链接：

https://www.bbsmax.com/A/RnJWrgYzqY/

有关魔方的知识可以参考以下这个链接：

https://www.cnblogs.com/susouth/p/9992923.html

 

      希望有所帮助！

css3之3D 旋转立方体与哆啦A梦的更多相关文章

  1. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

  2. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  4. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

  5. css3制作3d旋转相册

    此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...

  6. css3作3D旋转视频展示

    代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  7. CSS3制作3D旋转视频展示区

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 3D旋转立方体案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS3实现3D旋转相册

    静态效果图: 代码如下: <!doctype html><html lang="en"><head> <meta charset=&quo ...

随机推荐

  1. 【BZOJ4668】冷战（并查集）

    Description 1946 年 3 月 5 日,英国前首相温斯顿·丘吉尔在美国富尔顿发表"铁幕演说",正式拉开了冷战序幕.美国和苏联同为世界上的"超级大国" ...

  2. [转帖]U盘安装centos 的方法

    通过U盘或CD/DVD装centos7,出现“dracut-initqueue timeout..."解决办法   1.在用CD/DVD挂载centos7镜像安装系统时,出现“dracut- ...

  3. 设计模式:解释器模式(Interpreter)

    为人处事是一门大学问,察言观色.听懂弦外之音都是非常重要的,老板跟你说“XX你最近表现平平啊,还得要多努力”,如果你不当回事,平常对待,可能下次就是“XX,恩,你人还是不错,平常工作也很努力,但是我想 ...

  4. DLL的创建与使用

    一.动态链接库(DLL) 动态链接库提供了一种方法,使进程可以调用不属于其执行代码的函数.函数的可执行代码位于一个.dll文件中,该文件包含一个或多个已被编译.链接并使用它们的进程分开存储的函数. 优 ...

  5. 与C++开启新路途

    1.我与C的过去 学习C语言大概是从18年8月开始,一直到19年3月.我完成了对C的基本认识和学习,也顺利通过了二级C计算机的考试.不过当你开始深入于C的世界时,你会发现学习的基础好像略有浅薄.宏的世 ...

  6. HTML和CSS学习

    HTML和CSS HTML 基础讲解 要点: 标记语言不是编程语言 .html和.htm都是html文档的后缀 标签有围堵和自闭两类 开始标签中可以定义属性,属性的值要用引号引起来 H5一般用于移动端 ...

  7. flume复习(二)

    一.简介:flume是一种分布式.可靠且可用的系统,能够用于有效的从不同的源收集.聚合和移动大量的日志数据到集中式数据存储.它具有基于流数据的简单灵活的架构,它具有健壮的可靠性机制和许多故障转移和恢复 ...

  8. N1试卷常考词汇总结

    免れる まぬがれる 免去,幸免 軽率 けいそつ 轻率,草率 捩れる ねじれる 拧劲儿,扭歪,弯曲 裂ける さける 裂开,破裂 避ける さける 躲避,避开 つまむ 挟,捏,掐 追及 ついきゅう 追上.追 ...

  9. Spark报错java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries.

    Spark 读取 JSON 文件时运行报错 java.io.IOException: Could not locate executable null\bin\winutils.exe in the ...

  10. C# 过滤字典中的数据 并将过滤后的数据转成新的字典对象

    Dictionary<string, object> dic = new Dictionary<string, object>(); dic.Add("); dic. ...