主要记录两个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. appium环境搭建(一)----安装appium

    一.安装appium Appium官方网站:http://appium.io/,官方首页给出了appium的安装步骤. > brew install node # get node.js > ...

  2. AppCan模拟器调试

    来源: 1, 页面CSS调试 2, JS调试 3, 插件请打包后手机调试 4, 打开另一个页面示例: appcan.button("#myBtn", "ani-uct&q ...

  3. mongodb 数据操作(2)

    查询 db.student.find({}) 查询db.student.find({name:"李强1"}) 查询   条件查询 db.student.find({sex:&quo ...

  4. spark教程(三)-RDD认知与创建

    RDD 介绍 spark 最重要的一个概念叫 RDD,Resilient Distributed Dataset,弹性分布式数据集,它是 spark 的最基本的数据(也是计算)抽象. 代码中是一个抽象 ...

  5. unittest之三：字符串与列表的相互转换与分离数据时的应用

    一.分离数据时,需读取文档中存储的数据,但TXT文件的数据读取出来的类型为列表,而测试用例中断言的时候验证的是字符串,所以需要将列表转为字符串 #1字符串————>列表 str1='hello ...

  6. 基于IdentityServer4的声明的授权

    ## 概述 基于Asp.net Core 1.1 ,使用IdentityServer4认证与授权. ## 参考资料 [微软教程](https://docs.microsoft.com/zh-cn/as ...

  7. 异常-finally关键字的特点及作用

    package cn.itcast_07; import java.text.ParseException; import java.text.SimpleDateFormat; import jav ...

  8. STM32F10xxx_启动模式

    目录 STM32F10xxx_启动模式 更新记录 启动配置 参考: STM32F10xxx_启动模式 更新记录 version status description date author V1.0 ...

  9. python之time

    1. 获取当前时间戳 # -*- coding: UTF- -*- import time print(time.time()) # 输出:1540693297.94459 2. 将时间戳格式化为本地 ...

  10. 4种常用的Ajax请求方式

    在jQuery中,AJAX常见的请求方式主要有一下4种: 1.$.ajax()返回其创建的 XMLHttpRequest 对象 $.ajax() 只有一个参数:参数key/value对象,包含各配置及 ...