CSS3实战 - 3d转换 - 超级立方体

3d 转换实战，超级立方体，源码在下面，感兴趣的可以参考

效果是这样的：

源码奉上，感兴趣的参考

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS 3D转换</title><style>body {margin: 0;padding: 0;background-color: black;perspective: 1000px;color: white;}.box {margin: 200px auto;height: 200px;width: 200px;position:relative;transform-style:preserve-3d;transform:rotateX(30deg) rotateY(30deg);animation: rotate 10s linear infinite;}.box div {line-height: 200px;text-align: center;position:absolute;top: 0;left:0;right:0;bottom:0;transition: all 1s;box-shadow: inset 0 0 1px 6px rgba(255,255,255,0.8),inset 0 0 1px 12px rgba(255,255,0,0.8),inset 0 0 1px 18px rgba(255,0,0,0.8),inset 0 0 1px 24px rgba(0,0,255,0.8),0 0 80px 10px rgba(255,255,255,0.8);}/* 小盒子六个面居中 变长为大盒子的一半 */.box .little {line-height: 100px;top: 25%;left:25%;right:25%;bottom:25%;}/* 3d 转换 大盒子 六个面 */.front {transform: translateZ(100px);background:rgba(255,255,0,0.8);}.back  {transform: translateZ(-100px);background:rgba(0,255,255,0.8);}.left {transform: rotateY(-90deg) translateZ(100px);background:rgba(0,255,0,0.8);}.right {transform: rotateY(90deg) translateZ(100px);background:rgba(0,0,255,0.8);}.top {transform: rotateX(90deg) translateZ(100px);background:rgba(255,0,255,0.8);}.bottom {transform: rotateX(-90deg) translateZ(100px);background:rgba(125,125,255,0.8);}/*  大盒子 hover 变换 */.box:hover .front {transform: translateZ(200px);}.box:hover .back {transform: translateZ(-200px);}.box:hover .left {transform: rotateY(-90deg) translateZ(200px);}.box:hover .right {transform: rotateY(90deg) translateZ(200px);}.box:hover .top {transform: rotateX(90deg) translateZ(200px);}.box:hover .bottom {transform: rotateX(-90deg) translateZ(200px);}/* 3d 转换 小盒子 六个面 */.l-front {transform: translateZ(50px);background:rgba(255,255,0,0.8);}.l-back  {transform: translateZ(-50px);background:rgba(0,255,255,0.8);}.l-left {transform: rotateY(-90deg) translateZ(50px);background:rgba(0,255,0,0.8);}.l-right {transform: rotateY(90deg) translateZ(50px);background:rgba(0,0,255,0.8);}.l-top {transform: rotateX(90deg) translateZ(50px);background:rgba(255,0,255,0.8);}.l-bottom {transform: rotateX(-90deg) translateZ(50px);background:rgba(125,125,255,0.8);}/* 小盒子 hover 变换 */.box:hover .l-front {transform: translateZ(100px);}.box:hover .l-back {transform: translateZ(-100px);}.box:hover .l-left {transform: rotateY(-90deg) translateZ(100px);}.box:hover .l-right {transform: rotateY(90deg) translateZ(100px);}.box:hover .l-top {transform: rotateX(90deg) translateZ(100px);}.box:hover .l-bottom {transform: rotateX(-90deg) translateZ(100px);}/* 旋转动画 */@keyframes rotate {from {transform: rotateX(0deg) rotateY(360deg)}to {transform: rotateX(360deg) rotateY(0deg)}}</style></head><body><div class="box"><!-- 外面那层大盒子 六个面 --><div class="front">front</div><div class="back">back</div><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div><!-- 里面那层小盒子 六个面 --><div class="little l-front">front</div><div class="little l-back">back</div><div class="little l-left">left</div><div class="little l-right">right</div><div class="little l-top">top</div><div class="little l-bottom">bottom</div></div></body></html>

CSS3实战 - 3d转换 - 超级立方体相关推荐

css3中3D转换动画效果---transform: rotate3d(x,y,z,) 3D 旋转
CSS3 允许您使用 3D 转换来对元素进行格式化. 转换属性属性描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 允许你改变被转换元素的 ...
CSS3 中3D转换--旋转正方体，滚动照片墙的写法
首先给父元素加两个属性,把父元素变成3D空间. (1)transform-style:preserve-3d; (观察的场所 3D空间) (2)perspective:1000px;(近大远小–景深p ...
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
文章目录 3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transf ...
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...
CSS3中的2D和3D转换知识介绍
一 2D转换转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.变形.缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 1.移动 ...
html52D转换3D,CSS3 Transform 2D和3D转换
1.2 缩放语法transform : scale(x,y); -webkit-transform : scale(x,y); 根据倍数来缩放,取决于宽度(X轴)和高度(Y轴)的参数:也可以用一个参 ...
（28）css3 3D转换
transform 属性不止能实现 2D 转换,也可以制作 3D 立体转换效果,比普通的 x.y 轴组成的平面效果多了一条 z 轴,如下图: 一.透视电脑显示屏是一个 2D 平面,图像之所以具有立体 ...
html3d转换,CSS3 3D 转换
# CSS3 3D 转换 ## 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法: * rotateX() * rotateY() 点击下 ...
CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
CSS3 3D转换和旋转木马案例
文章目录前言有什么特点一.三维坐标系 3D转换二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...

CSS3实战 - 3d转换 - 超级立方体

CSS3实战 - 3d转换 - 超级立方体相关推荐

最新文章

热门文章