HTML+CSS怎么做3D正方体

示例如下：

HTML代码：

<div class="first"><div class="wrap"><div class="font"></div><div class="left"></div><div class="right"></div><div class="top"></div><div class="back"></div><div class="bottom"></div></div>
</div>

CSS代码如下：

 html{background: radial-gradient(ellipse at center,green 20%, blue 100%);height: 0.1%;}.first{-webkit-perspective:300px;perspective: 300px;width: 70px;height: 70px;position: absolute;top: 50%;left: 50%;margin-left: -35px;margin-top:-35px;  }.wrap{position: absolute;height: 100px;width: 100px;transform-style:preserve-3d ;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(-30deg) rotateY(-30deg);-webkit-animation: 5s mov linear infinite ;}.wrap > div{background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);background-color: rgba(200,150,160,0.3);height:100%;width: 100%;border: 1px solid blueviolet;-webkit-box-shadow: 0 0 10px rgba(0, 128, 0, 0.4);box-shadow: 0 0 10px rgba(0, 128, 0, 0.4);position: absolute;}.font{-webkit-transform: translateZ(50px);}.back{-webkit-transform: rotateX(180deg) translateZ(50px);}.left{-webkit-transform: rotateY(-90deg) translateZ(50px);}.right{-webkit-transform: rotateY(90deg) translateZ(50px);}.top{-webkit-transform: rotateX(90deg) translateZ(50px);}.bottom{-webkit-transform: rotateX(-90deg) translateZ(50px);}@keyframes mov{from{-webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(0em);}to{-webkit-transform: rotateX(360deg) rotateY(360deg) translateZ(0em);}}

HTML+CSS怎么做3D正方体相关推荐

前端游戏巨制! CSS居然可以做3D游戏了
前言偶然接触到CSS的3D属性, 就萌生了一种做3D游戏的想法. 了解过css3D属性的同学应该都了解过perspective.perspective-origin.transform-style: ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
CSS+HTML实现3D图片旋转效果
CSS+HTML实现3D图片旋转效果在做JavaEE的项目设计的时候,觉得页面过于单调,就学着百度上的图片轮转效果,自己也写了一个,记录一下: index.html部分源码: html{backgr ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐
1.html+css+jquery实现,电脑和手机均已兼容,完整源码下载 2.3D旋转木马立体动画相册 3.3D正方体旋转动画相册2中实现方式: 第一种方式: 第二种方式: 4.表白示爱文字+动画爱心 ...
如何用css实现一个3D旋转照片墙
一.前言学习前端是件很有趣的事,今天我又来分享一下关于html+css实现的3D效果的照片墙的代码啦,希望感兴趣的小伙伴会喜欢! 正文: 今天,我们要做一个3D旋转相册,首先让我们了 ...
css怎么做向左拉伸动画_CSS核心动画技巧：重力，挤压和拉伸
css怎么做向左拉伸动画 Previously I've talked about using ease-in and ease-out to enhance motion design. Those ...
纯用CSS来实现3D立方体旋转效果
这次用纯CSS来实现3D立方体旋转效果效果如下(可以想象成一个旋转的立方体) HTML部分首先创建一个ul标签在其ul标签下的6个li标签相当于正方体的6个面 <body>< ...
HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！
HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...

HTML+CSS怎么做3D正方体

HTML+CSS怎么做3D正方体相关推荐

最新文章

热门文章