css3技巧——实现一个正方体

CSS3为我们提供了很多以往没办法实现的功能，如动画、transform、transition等等，今天，我们就来使用CSS3的transform和transition配合实现一个正方体的构建

<!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>Document</title><style>html,body {height: 100%;overflow: hidden;}body {background: linear-gradient(45deg, #222, #333, #444);}.box {margin: 0 auto;width: 200px;padding-top: 200px;box-sizing: border-box;}.cube {/* 设置正方体的转换类型是3d转换模式*/transform-style: preserve-3d;/* 为了方便我们观察每一个面，将正方体旋转一定的角度 */transform: rotateX(-35deg) rotateY(45deg);}/* 每个面通用的基础样式 */.site {background: rgba(0, 188, 166, .6);color: #FFFFFF;width: 200px;height: 200px;border: 1px solid #333333;text-align: center;line-height: 200px;position: absolute;font-size: 64px;font-weight: bold;transition: transform 1.5s;cursor: pointer;box-shadow: 0 0 5px #FFFFFF;}/* 以下为默认的前后左右上下6个面的厨师状态，设置一下延时，方便我们观看正方体构建的过程 */.front {transform: scale(0) translateZ(300px);transition-delay: 100ms;}.back {transform: scale(0) translateZ(-300px);transition-delay: 1600ms;}.left {transform: scale(0) rotateY(-90deg) translateZ(300px);transition-delay: 3100ms;}.right {transform: scale(0) rotateY(90deg) translateZ(-300px);transition-delay: 4600ms;}.top {transform: scale(0) rotateX(90deg) translateZ(300px);transition-delay: 6100ms;}.bottom {transform: scale(0) rotateX(-90deg) translateZ(-300px);transition-delay: 7600ms;}/* 添加active类名后，开始构建正方体 */.active.front {transform: scale(1) translateZ(100px);}.active.back {transform: scale(1) translateZ(-100px) rotateY(180deg);}.active.left {transform: scale(1) rotateY(-90deg) translateZ(100px);}.active.right {transform: scale(1) rotateY(90deg) translateZ(100px);}.active.top {transform: scale(1) rotateX(90deg) translateZ(100px);}.active.bottom {transform: scale(1) rotateX(-90deg) translateZ(100px);}.site.active:hover,.finish {transition-delay: 0ms!important;}.active.site:hover.front {transform: scale(1.2) translateZ(100px);}.active.site:hover.back {transform: scale(1.2) translateZ(-100px);}.active.site:hover.left {transform: scale(1.2) rotateY(-90deg) translateZ(100px);}.active.site:hover.right {transform: scale(1.2) rotateY(-90deg) translateZ(-100px);}.active.site:hover.top {transform: scale(1.2) rotateX(90deg) translateZ(100px);}.active.site:hover.bottom {transform: scale(1.2) rotateX(90deg) translateZ(-100px);}.control {position: fixed;bottom: 30px;left: 0;text-align: center;width: 100%;}button {width: 100px;height: 30px;background: linear-gradient(45deg, rgb(11, 108, 187), rgb(3, 61, 109));border-radius: 5px;border: 1px solid #FFFFFF;outline: none;color: #FFFFFF;font-size: 18px;cursor: pointer;}button:disabled {opacity: .6;cursor: not-allowed;}button:hover {opacity: .8;}button:hover:disabled {opacity: .6;}</style>
</head><body><div class="box"><div class="cube" id="cube"><div class="site front">1</div><div class="site back">2</div><div class="site left">3</div><div class="site right">4</div><div class="site top">5</div><div class="site bottom">6</div></div><div class="control"><button id="left" disabled>←</button><button id="up" disabled>↑</button><button id="down" disabled>↓</button><button id="right" disabled>→</button><button id="reset" disabled>重置</button></div></div><script>var sites = document.querySelectorAll('.site');var left = document.getElementById('left');var right = document.getElementById('right');var up = document.getElementById('up');var down = document.getElementById('down');var reset = document.getElementById('reset');var cube = document.getElementById('cube');var degX = -35,degY = 45;function start() {for (var i = 0; i < sites.length; i++) {var site = sites[i];site.classList.add('active');}}function finish() {for (var i = 0; i < sites.length; i++) {var site = sites[i];site.classList.add('finish');}left.removeAttribute('disabled');right.removeAttribute('disabled');up.removeAttribute('disabled');down.removeAttribute('disabled');reset.removeAttribute('disabled');}function doReset(cb) {deg = -35;degY = 45;changeDeg(degX, degY);for (var i = 0; i < sites.length; i++) {var site = sites[i];site.classList.remove('active', 'finish');}setTimeout(() => {cb && cb();}, 9100);}function changeDeg(degX, degY) {cube.style.transform = `rotateX(${degX}deg) rotateY(${degY}deg)`;}reset.onclick = function() {doReset(() => {init();});};left.onclick = function() {degY -= 5;changeDeg(degX, degY);};right.onclick = function() {degY += 5;changeDeg(degX, degY);};up.onclick = function() {degX -= 5;changeDeg(degX, degY);};down.onclick = function() {degX += 5;changeDeg(degX, degY);};function init() {start();setTimeout(() => {finish();}, 9100)}setTimeout(() => {init();}, 1000);</script>
</body></html>

css3技巧——实现一个正方体相关推荐

制作导航栏并使用CSS美化,CSS3样式创建一个漂亮简洁的导航栏
本教程旨在教大家结合CSS3样式创建一个漂亮,简洁的导航栏.而在过去,我们只能借助图片,JavaScript和div层进行创作. 注意:下面所有的示例都是在Mozilla Firefox,Safari ...
动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
html鼠标点击有手势出来,用原生js+css3撸的一个下拉手势事件插件
; (function () { var DropDown = function (dropId = 'dropDwon', distance = 60, callBack = () => {} ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
怎样快速画出一个正方体_小学数学非常有效的“画图”解题法，快速解题的“金钥匙”...
小学阶段的数学主要培养的是孩子的逻辑思维能力,是从形象思维逐步过度到抽象思维的过程,如果在小学阶段没有将基础打牢,那么等孩子上初中后面对更复杂的学习内容,就会变得更吃力. 在小学数学中,"画 ...
用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果
今天看到淘宝ued博客上左边的菜单导航动画效果不错,就用jQuery和css3做了一个简单的例子,主要是实现运用了jQuery 事件和css3 transition属性. 用一个元素来实现鼠标滑动到某 ...
css3新增了哪三种边框效果,怎么在CSS3中实现一个边框效果
怎么在CSS3中实现一个边框效果发布时间:2021-03-11 18:01:54 来源:亿速云阅读:125 作者:Leah 怎么在CSS3中实现一个边框效果?相信很多没有经验的人对此束手无策,为此 ...
html 特效隐藏div,如何实现用css3显示隐藏一个div特效
这篇文章主要介绍了关于如何实现用css3显示隐藏一个div特效,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下显示隐藏一个p特效的方法有很多,下为大家介绍下使用纯css3是如何实现的, ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...

css3技巧——实现一个正方体

css3技巧——实现一个正方体相关推荐

最新文章

热门文章