主要记录两个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. Zookeeper入门(一)

      Zookeeper是分布式服务治理中间件   一.Zookeeper的简介   官方文档上这么解释zookeeper,它是一个分布式服务框架,是Apache Hadoop 的一个子项目,它主要是用 ...

  2. linux运维、架构之路-Lnmp架构部署

    一.Lnmp架构原理 二. Lnmp架构软件安装 1.Nginx安装脚本 #!/bin/bash useradd -s /sbin/nologin -M www mkdir -p /server/to ...

  3. pikachu-SQL注入

    参考网址: http://www.mamicode.com/info-detail-2795438.html

  4. [LGP5115] Check,Check,Check one two!

    神奇的思路,还是要学习一个. 题意:给你一个字符串,并定义两个前缀的lcs.两个后缀的lcp,求式子膜\(2^{64}\)的值. \[ \sum_{1\le i<j\le n} lcp(i,j) ...

  5. [LGP4859,...] 一类奇怪的容斥套DP

    漫山遍野都是fake的光影. 题目 [LGP4859] 已经没有什么好害怕的了 给定两个长度为n的数组a和b,将a中元素与b中元素配对,求满足ai>bj的配对(i,j)个数减去满足ai<b ...

  6. c++ 【递归算法】梵塔问题

    一道递归水题,2话不说,直接放代码: #include<iostream> using namespace std; int k; void move(int m,char a,char ...

  7. AC自动机模版

    我以前一直觉得AC自动机就是我打一个代码,然后可以帮我自动AC题目,现在才知道原来是处理字符串的一个有意思的东西,然后我们现在就来看一下这个东西 1464: [视频][AC自动机]统计单词出现个数 时 ...

  8. CSS3彩色进度条加载动画 带进度百分比

    在线演示       本地下载

  9. leetcode hard

    # Title Solution Acceptance Difficulty Frequency     4 Median of Two Sorted Arrays       27.2% Hard ...

  10. Brain的同步规则

    这段话来自Java编程思想并发一章 什么时候使用同步 如果你正在写一个变量,它可能接下来将被另一个线程读取,或者正在读取一个上一次已经被另一个线程写过的变量,那么你必须使用同步,并且,读写线程都必须用 ...