CSS3 3D旋转立方体

2019独角兽企业重金招聘Python工程师标准>>>

主要用到动画css3 animation,特别注意当完成正方体的过程中，每个面旋转时这个面的坐标系是跟着变换的，只是他们的相对位置不变，默认的变换基点是（50% 50% 0），我们可以使用transform-origin改变默认基点，也可以按默认的基点来变换，关于rotateX或者rotateY旋转角度的正负区分，是视线在x轴或者Y轴的+方向向负方向看，如果是顺时针则角度为正值，逆时针为负值，下面是按默认基点实现立方体的。

<div class="my3dspace"><div id="cubepages"><div class="page" id="font">1</div><div class="page" id="back">2</div><div class="page" id="upper">3</div><div class="page" id="bottom">4</div><div class="page" id="left">5</div><div class="page" id="right">6</div></div></div>

.my3dspace{margin-top:100px;-webkit-perspective:800;}
#cubepages{width:200px;height:200px;margin:0 auto;-webkit-transform-style:preserve-3d;position:relative;-webkit-animation:rotate 20s infinite;}
.page{position:absolute;width:160px;height:160px;padding:20px;box-sizing:content-box;font-size:100px;text-align:center;line-height:170px;background:#333;color:#fff;-webkit-transition: -webkit-transform 1s linear;}
#font {transform: rotateY(0) translateZ(100px);background:#09c45d;
}#back {transform: translateZ(-100px) rotateY(180deg) ;background:#01bb43;
}#left {transform: rotateY(-90deg) translateZ(100px);background:#dd74f7;
}#right {transform: rotateY(90deg) translateZ(100px);background:#eb12c0;
}#upper {transform: rotateX(90deg) translateZ(100px);background:#03cae2;
}#bottom {transform: rotateX(-90deg) translateZ(100px);background:#11aafa;
}
@-webkit-keyframes rotate {from {transfrom:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}to{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}

另一个可以拖动的例子

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>立方体特效</title><style>* {margin: 0;padding: 0;}body {background: #ccc;}.stage {perspective: 800;perspective-origin: 50% 50%;}.cube {position: relative;width: 200px;height: 200px;margin: 100px auto;background: #ccc;transform-style: preserve-3d;transform: rotateX(-20deg) rotateY(50deg);}.cube .face {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-size: cover;box-shadow: 0 0 100px #5fbcff;}.front {background: url(images/a5.png);transform: translateZ(100PX);}.back {background: url(images/a1.png);transform: translateZ(-100px);}/*.left{background:url(images/a2.png);transform:translateX(-100PX) rotateY(-90deg)} 也可以写成下面的写法，旋转角度后坐标系统也发生了变化*/.left {background: url(images/a2.png);transform: rotateY(-90deg) translateZ(100PX)}/*.left{background:url(images/a2.png);transform:translateX(-100PX) rotateY(-90deg)} 围绕y轴旋转，图形右侧向里为正，图形右侧向外为负*/.right {background: url(images/a2.png);transform: translateX(100PX) rotateY(90deg)}.up {background: url(images/a3.png);transform: translateY(-100PX) rotateX(90deg)}.down {background: url(images/a3.png);transform: rotateX(-90deg) translateZ(100px)}</style><script>window.onload = function() {var box = document.querySelector("#box")var y = 50var x = 20box.onmousedown = function(ev) {var oEvent = ev || event;var disX = oEvent.clientX - yvar disY = oEvent.clientY - xdocument.onmousemove = function(ev) {var oEvent = ev || event;x = oEvent.clientY - disYy = oEvent.clientX - disXbox.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg)"};document.onmouseup = function() {document.onmousemove = nulldocument.onmouseup = null};return false}}</script>
</head><body><div class="stage"><div class="cube" id="box"><div class="front face">front</div><div class="back face">back</div><div class="up face">up</div><div class="down face">down</div><div class="left face">left</div><div class="right face">right</div></div></div>
</body></html>

里面用到的

background-sizecover保持图像的纵横比并将图像拉长或缩放成将完全覆盖背景定位区域的最小大小。

background-size：contain 意思会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

相同点：图片都是等比例缩放

不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示

contain：正好相反，他是按照某一边来覆盖显示区域的，会有白边

转载于:https://my.oschina.net/u/2612473/blog/881089

CSS3 3D旋转立方体相关推荐

css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子给盒子添加动画属性使其可以转动. 原理: 原理其实很简单我们看到的一个立方体其实就是靠六个平面搭建起来的如图所示 :六 ...
3d旋转立方体特效，可自由旋转，超强透视效果的html页面源码
大家好,今天给大家介绍一款,3d旋转立方体特效,可自由旋转,超强透视效果的html页面源码 (图1).送给大家哦,获取方式在本文末尾. 图1 可以用鼠标自由全角度旋转(图2) 图2 代码完整,需要的朋 ...
CSS3——3D旋转图（跑马灯效果图）
2019独角兽企业重金招聘Python工程师标准>>> CSS3--3D旋转图(跑马灯效果图) CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的 ...
CSS3 3D旋转立方
##一.3D中的透视 1.透视是我们观察事物的方式在美术学中,有一种画法叫做透视画法,他让我们对所观察的物体从二维拓展到三维,也就是说,平面的物体变成了立体,占据了独自的 ...
html中3d哪个方向是x轴,详解用CSS绘制3D旋转立方体
CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例.从一种只是简单的颜色和尺寸渲染的标记符,CSS现在已经变成了一种能够创造出复杂的.具有艺术感染力的视觉效果的编程语言.动画效果的生 ...
css3 3d旋转兼容模式下,CSS3 3D 转换
3D Transforms CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法:rotateX() rotateY() 点击下面的元素,来查看 2D 转 ...
css3 3D旋转特效
最近自己的网站正在制作,由于是个人网站,所以我傲娇的抛弃了IE,痛快的用起了css3和html5的诸多特效,然而问题亦随之而来.这篇文章的主要讲解在使用css3的3D旋转的时候遇到的文章,错误之处,还 ...
【181113】C++ 实现可控的3D旋转立方体源代码
VC++代码实现旋转立方体,没有使用DirectX.OpenGL,允许你拖动滑块改变旋转角度,也能让立方体围绕某一方向旋转,虽然功能不多,但是代码极具参考价值,像这类程序很能考验编程水平. 源码下载地 ...

CSS3 3D旋转立方体

CSS3 3D旋转立方体相关推荐

最新文章

热门文章