主要记录两个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. docker 使用阿里云免费仓库

    阿里云为开发人员提供了免费的仓库~~ 登录阿里云 ,选择容器镜像服务,当前是2019/08/13 ,之后不知道阿里云控制台菜单会不会调整哈 进入容器镜像服务菜单,创建仓库,需要绑定git仓库 怎么上传 ...

  2. [转帖]【JDK和Open JDK】平常使用的JDK和Open JDK有什么区别

    https://www.cnblogs.com/sxdcgaq8080/p/7487369.html 其实不同的 openjdk的版本也不一样. atlassian说AdoptOpenJDK我们测试充 ...

  3. 用data的方法获取值的时候，要注意的问题一定要在先封装好

    var art=$(".add-more").prev().find(".content").data("list1"); 我们一定要在aj ...

  4. eclipse+maven搭建springboot项目入门

    一.下载jdk,例如(jdk1.8.171) 安装(注意仅仅安装jdk就可以了,不要安装jre,设置JAVA_HOME,配置jdk环境变量) 二.下载maven(apache-maven-3.5.3- ...

  5. springboot添加https

    一.使用JDK工具keytool生成证书 keytool命令详解 https://blog.csdn.net/zlfing/article/details/77648430 keytool -genk ...

  6. Java排序--排序算法(内排序)

    常用内排序算法 我们通常所说的排序算法往往指的是内部排序算法,即需要排序的数据在计算机内存中完成整个排序的过程,当数据率超大或排序较为繁琐时常借助于计算机的硬盘对大数据进行排序工作,称之为外部排序算法 ...

  7. Linux小知识：sudo su和su的区别

    Linux小知识:sudo su和su的区别 本文是学习笔记,视频地址:https://www.bilibili.com/video/av62836363 su是申请切换root用户,需要申请root ...

  8. ajax异步刷新请求数据

    AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XM ...

  9. vue中添加与删除，关键字搜索

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

  10. java 周期时期计算

    package org.apple.date; import java.text.SimpleDateFormat; import java.util.Calendar; import java.ut ...