CSS3 3D旋转立方体
2017-04-17 00:00
393 查看
主要用到动画css3 animation,特别注意当完成正方体的过程中,每个面旋转时这个面的坐标系是跟着变换的,只是他们的相对位置不变,默认的变换基点是(50% 50% 0),我们可以使用transform-origin改变默认基点,也可以按默认的基点来变换,关于rotateX或者rotateY旋转角度的正负区分,是视线在x轴或者Y轴的+方向向负方向看,如果是顺时针则角度为正值,逆时针为负值,下面是按默认基点实现立方体的。
另一个可以拖动的例子
里面用到的
background-sizecover保持图像的纵横比并将图像拉长或缩放成将完全覆盖背景定位区域的最小大小。
background-size:contain 意思会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
相同点:图片都是等比例缩放
不同点:cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示
contain:正好相反,他是按照某一边来覆盖显示区域的,会有白边
<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 = 50 var x = 20 box.onmousedown = function(ev) { var oEvent = ev || event; var disX = oEvent.clientX - y var disY = oEvent.clientY - x document.onmousemove = function(ev) { var oEvent = ev || event; x = oEvent.clientY - disY y = oEvent.clientX - disX box.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg)" }; document.onmouseup = function() { document.onmousemove = null document.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:正好相反,他是按照某一边来覆盖显示区域的,会有白边
相关文章推荐
- CSS3 3D旋转立方体
- 纯css3 3D图片立方体旋转动画特效
- css3-立方体3d旋转动画
- CSS3 3D旋转动画代码实例
- CATransform3D 矩阵变换之立方体旋转实现细节
- css3的3D图片旋转
- 使用css3 实现旋转的立方体
- CSS3 3D效果 实现一个可旋转的正方体
- CSS3实现正方形立方体旋转
- CSS3中的3D旋转 rotate、3D位移 translate
- 纯CSS炫酷3D旋转立方体进度条特效
- 详解用CSS绘制3D旋转立方体
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
- 用css3transform做出3D旋转的骰子
- CSS3特效----制作3D旋转照片展示区
- CSS3 3D旋转动画代码实例
- 纯CSS3动画之旋转的立方体
- CSS3:制作3D旋转导航综合练习题
- css3-3D旋转 透视 位移等属性
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件