[css] 用css3画出一个立体魔方

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>立方体</title><style>.box{width: 300px;height: 300px;margin: 100px auto;perspective: 500px;}.con{position:relative;width:300px;height:300px;transform-style:preserve-3d;transform-origin:50% 50% -150px;animation:rotate 4s infinite;}.con .side{position:absolute;width:300px;height:300px;font-size:44px;line-height: 300px;text-align: center;}.con .before{background-color: rgba(0,0,0,0.4);}.con .left{background-color: rgba(255,0,0,0.4);left:-300px;top:0;transform:rotateY(-90deg);transform-origin:right;}.con .right{background-color: rgba(255,255,0,0.4);left:300px;top:0;transform:rotateY(90deg);transform-origin:left;}.con .top{background-color: rgba(0,255,0,0.4);left:0;top:-300px;transform:rotateX(90deg);transform-origin:bottom;}.con .bottom{background-color: rgba(0,0,255,0.4);left:0;top:300px;transform:rotateX(-90deg);transform-origin:top;}.con .back{background-color: rgba(200,122,0,0.4);transform:translateZ(-300px);}@keyframes rotate{0%{transform:rotateX(0) rotateY(0);}50%{transform:rotateX(0) rotateY(360deg);}100%{transform:rotateX(360deg) rotateY(360deg);}}</style>
</head>
<body>
<div class="box"><div class="con"><div class="side before">前</div><div class="side back">后</div><div class="side top">上</div><div class="side bottom">下</div><div class="side left">左</div><div class="side right">右</div></div>
</div>
</body>
</html>

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 用css3画出一个立体魔方相关推荐

php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
运用html画一个三角形,利用css或html5画出一个三角形的方法
利用css或html5画出一个三角形的方法发布时间:2020-09-14 14:49:22 来源:亿速云阅读:83 作者:小新这篇文章主要介绍利用css或html5画出一个三角形的方法,文中介绍 ...
如何用c语言画个叮当猫,如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
css3魔方3乘3每层旋转_如何使用css3设计出一个立体旋转魔方？
需要先了解的知识: ①了解CSS的2d下的transform变化下的平移(translate)和旋转(rotate). ②了解CSS的3d下的transform变化下的平移和旋转. ③使用transf ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...
[css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
[css] 用css画出一个圆圈，里面有个对号
[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;bor ...

[css] 用css3画出一个立体魔方

[css] 用css3画出一个立体魔方

个人简介

主目录

[css] 用css3画出一个立体魔方相关推荐

最新文章

热门文章