Test1.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     *{

         margin: 0;

         padding: 0;

     }

     .wrap{

         margin: 50px auto;

         width: 200px;

         padding: 200px;

         perspective: 800px;

         border: 1px dashed #333;

     }

     .box{

         position: relative;

         width: 200px;

         height: 200px;

         line-height: 200px;

         font-size: 100px;

         text-align: center;

         color: #fff;

         font-weight: bold;

         border: 1px dashed #ccc;

         transform-style: preserve-3d;

         transform-origin: center center -100px;/*定位的方式，旋转中心点这样设置，但存在兼容性问题*/

         transition: 1s;

     }

     .box div{

         position: absolute;

         width: 200px;

         height: 200px;

     }

     .box div:nth-of-type(1){

         top: -200px;

         background-color: red;

         transform-origin: bottom;

         transform: rotateX(90deg);

     }

     .box div:nth-of-type(2){

         left: -200px;

         background-color: green;

         transform-origin: right;

         transform: rotateY(-90deg);

     }

     .box div:nth-of-type(3){

         background-color: blue;

     }

     .box div:nth-of-type(4){

         right: -200px;

         background-color: #333;

         transform-origin: left;

         transform: rotateY(90deg);

     }

     .box div:nth-of-type(5){

         bottom: -200px;

         background-color: yellow;

         transform-origin: top;

         transform: rotateX(-90deg);

     }

     .box div:nth-of-type(6){

         background-color: tan;

         transform: translateZ(-200px) rotateX(180deg);

     }

     .wrap:hover .box{

         transform: rotateX(360deg);

     }

     </style>

 </head>

 <body>

     <div class="wrap">

         <div class="box">

             <div>1</div>

             <div>2</div>

             <div>3</div>

             <div>4</div>

             <div>5</div>

             <div>6</div>

         </div>

     </div>

 </body>

 </html>

Test2.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     *{

         margin: 0;

         padding: 0;

     }

     .wrap{

         margin: 50px auto;

         width: 200px;

         padding: 200px;

         perspective: 800px;

         border: 1px dashed #333;

     }

     .box{

         position: relative;

         width: 200px;

         height: 200px;

         line-height: 200px;

         font-size: 100px;

         text-align: center;

         color: #fff;

         font-weight: bold;

         border: 1px dashed #ccc;

         transform-style: preserve-3d;

         transform-origin: center center -100px;/*定位的方式，旋转中心点这样设置，但存在兼容性问题*/

         transition: 1s;

     }

     .box div{

         position: absolute;

         width: 200px;

         height: 200px;

     }

     .box div:nth-of-type(1){

         top: -200px;

         background-color: red;

         transform-origin: bottom;

         transform: rotateX(90deg);

     }

     .box div:nth-of-type(2){

         left: -200px;

         background-color: green;

         transform-origin: right;

         transform: rotateY(-90deg);

     }

     .box div:nth-of-type(3){

         background-color: blue;

     }

     .box div:nth-of-type(4){

         right: -200px;

         background-color: #333;

         transform-origin: left;

         transform: rotateY(90deg);

     }

     .box div:nth-of-type(5){

         bottom: -200px;

         background-color: yellow;

         transform-origin: top;

         transform: rotateX(-90deg);

     }

     .box div:nth-of-type(6){

         background-color: tan;

         transform: translateZ(-200px) rotateX(180deg);

     }

     .wrap:hover .box{

         transform: rotateX(360deg);

     }

     </style>

 </head>

 <body>

     <div class="wrap">

         <div class="box">

             <div>1</div>

             <div>2</div>

             <div>3</div>

             <div>4</div>

             <div>5</div>

             <div>6</div>

         </div>

     </div>

 </body>

 </html>

Test3.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     /*不用麻烦设置left，top等值*/

     .wrap{

         margin: 0 auto;

         width: 200px;

         height: 200px;

         padding: 200px;

         border: 1px solid #333;

         perspective: 800px;/*!!!*/

     }

     .box{

         width: 200px;

         height: 200px;

         position: relative;

         transform-style: preserve-3d;/*!!!*/

         transition: 3s all;

         transform: translateZ(-100px) rotateX(0);

     }

     .box div{

         width: 200px;

         height: 200px;

         line-height: 200px;

         color: #fff;

         position: absolute;

         font-size: 100px;

         text-align: center;

     }

     .box div:nth-of-type(1){

         background-color: red;

         transform: translateZ(100px);

     }

     .box div:nth-of-type(2){

         background-color: blue;

         transform-origin: top;

         transform: translateZ(-100px) rotateX(90deg);/*!!!先移到最里面再操作能保证数字是正的，然后再向前移动，然后再控制其父向后移动*/

     }

     .box div:nth-of-type(3){

         background-color: yellow;

         transform: translateZ(-100px) rotateX(180deg);/*!!!*/

     }

     .box div:nth-of-type(4){

         background-color: green;

         transform-origin: bottom;

         transform: translateZ(-100px) rotateX(-90deg);/*!!!*/

     }

     .wrap:hover .box{

         transform: translateZ(-100px) rotateX(270deg);

     }

     </style>

 </head>

 <body>

     <div class="wrap">

         <div class="box">

             <div>1</div>

             <div>2</div>

             <div>3</div>

             <div>4</div>

         </div>

     </div>

 </body>

 </html>

css 3d box 实现的一些注意事项的更多相关文章

  1. Intro to CSS 3D transforms

    原文地址:Intro to CSS 3D transforms,本文只是翻译了其中的一部分,省去了作者写文章的原因浏览器兼容部分(已经过时) Perspective 元素需要设置需要设置perspec ...

  2. 从css 3d说到空间坐标轴

    有一次我们说到掷骰子那个游戏,当时是用了一个steps属性+雪碧图来制作帧动画,这当然颇为不错,但其实一开始我想的不是这样的,我想的是用真的3d和动画去做,这个方案涉及到不少空间的知识,今天来给大伙好 ...

  3. css 3D动画

    一.今天让我们来学习一下css 3D吧! 1.首先我们要学习好css3 3d一定要有一定的立体感! 2.再来那就聊聊原理吧! 3.css3 3d 顾名思义是由两个2d名片组成的 但不是让你建立连个2d ...

  4. CSS 3D 的魅力

    作者 | 子慕大诗人 来源 | www.cnblogs.com/1wen/p/9064011.html   前言:   最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下.  在阅读 ...

  5. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  6. CSS 3D的魅力

    用户1093975发表于Web项目聚集地订阅 151 在这篇文章中: 前言: demo1 demo2 结语: 本文介绍了CSS来实现3D效果,并且有详细代码和解释.建议大家只字不差的阅读.本文的作者是 ...

  7. 一个简单的CSS3+js 实现3D BOX

    <!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...

  8. Codrops 优秀教程：CSS 3D Transforms 实现书本效果

    这个使用  CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...

  9. 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

    今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...

随机推荐

  1. iOS常用的加密方式

    MD5 iOS代码加密 创建MD5类,代码如下 #import <Foundation/Foundation.h> @interface CJMD5 : NSObject +(NSStri ...

  2. C# 字节数组拼接的速度实验(Array.copy(),Buffer.BlockCopy(),Contact())

    无聊做了如题的一个算法的优劣性能比较,由于很多人都只关心结果,那么我先贴出结果如下: 由于我的测试数据量比较小,只能得出Array.Copy()和Buffer.BlockCopy()方法性能要好于Co ...

  3. 使用robotframework常见的几个问题

    问题1:用rf运行IEdriver的速度好慢,比如在输入框输入用户名,一秒输入一个字符.你们的是不是这样子的?.如果是chromedriver就很快 解决办法:把IEDriver从64位换成32位 , ...

  4. python selenium2 - 鼠标键盘操作

    文件路径:Python27\Lib\site-packages\selenium\webdriver\common\action_chains.py action_chains[鼠标键盘动作] 方法说 ...

  5. 笔记本中LVDS屏与eDP屏的比较

    LVDS,即Low Voltage Differential Signaling,是一种低压差分信号技术接口.它是美国NS公司(美国国家半导体公司)为克服以TTL电平方式传输宽带高码率数据时功耗大.E ...

  6. 17:不重复整数提取NoRepeatNum

    题目描述 输入一个int型整数,按照从右向左的阅读顺序,返回一个不含重复数字的新的整数. 输入描述:输入一个int型整数 输出描述:按照从右向左的阅读顺序,返回一个不含重复数字的新的整数 输入例子: ...

  7. ros学习网站

    ROS机器人操作系统入门-中国大学MOOC      https://www.bilibili.com/video/av24585414/?p=39 http://i.youku.com/i/UNDA ...

  8. MVC中的ViewData、ViewBag和TempData

    一.ViewBag和ViewData的定义 public dynamic ViewBag { get; } public ViewDataDictionary ViewData { get; set; ...

  9. vue proxyTable

    Vue-cli proxyTable 解决开发环境的跨域问题 字数474 阅读1685 评论1 喜欢3 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆 ...

  10. Xenomai 3 POSIX

    Xenomai 3在架构设计上确实优先Xenomai 2,至少对开发者来说,少维护了不少东西,看下面两张图就知道了 第一张图是Xenomai2的,第二张图是Xenomai3的,Xenomai3在内核中 ...