主要记录两个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. Redhat7 安装 yum（换成免费版） 安装gcc

    最近上Linux系统基础课程,要在虚拟机上编译运行程序,这时候就需要安装gcc,网上一搜,各种什么在线,离线安装,其中在线安装很方面,一个命令 yum install gcc 即可解决 可我这么输入后 ...

  2. [爬虫] requests库

    requests库的7个常用方法 requests.request() 构造一个请求,支撑以下各种方法的基础方法 requests.get() 获取HTML网页的主要方法,对应于HTTP的GET re ...

  3. 【Python】【基础知识】【内置函数】【help的使用方法】

    原英文帮助文档: help([object]) Invoke the built-in help system. (This function is intended for interactive ...

  4. yum源配置、epel源配置

    关键词:yum源,本地yum源,网络yum源   [1]配置本地yum源 1.挂载好光盘到/redhat/mnt/mnt下 mount /dev/cdrom /mnt 2.操作 cd /etc/yum ...

  5. windows vue环境搭建

    windows环境搭建Vue开发环境 一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:). 二.设置nodejs pr ...

  6. C++拷贝构造函数：浅拷贝与深拷贝

    在介绍C++浅拷贝与深拷贝之前,我们先引出C++的拷贝构造函数. C++拷贝构造函数是一种特殊的构造函数,其形参是本类对象的引用.用于在建立一个新的对象时,使用一个已经存在的对象来初始化这个新对象.因 ...

  7. ORM中的锁和事务

    锁 sql语句加锁 select * from book where id=1 for update; begin; start transaction; select * from t1 where ...

  8. 使用antd List组件实现轮播图

    import { List, Avatar, Carousel } from 'antd'; import { connect } from 'dva'; import './lamp.less' c ...

  9. javaScript基础知识总汇

    javaScript是什么: 1.JavaScript 运行在客户端(浏览器)的编程语言 2.用来给HTML网页增加动态功能 3.用来给HTML网页增加动态功能. 4.Netscape在最初将其脚本语 ...

  10. SQL学习（二）之四大查询语句以及标准写法

    SQL四大查询语句——增删改查 增-INSERT INSERT INTO 表 (字段列表) VALUES(值列表) INSERT INTO `user_table` (`ID`, `username` ...