html怎么画一个正方形,css3画一个正方体

css画一个正方体

@keyframes flash {

0%{ transform: rotateY(0) rotateX(0); }

100%{ transform: rotateY(360deg) rotateX(360deg); }

}

.box {

width: 100px;

height: 100px;

position: relative;

margin: 100px auto 0;

transform-style: preserve-3d;

animation: flash 3s linear infinite;

}

.box > div {

position: absolute;

width: 100px;

height: 100px;

transition: all 1s;

}

.box>div:nth-of-type(1){ background: lightblue; }

.box>div:nth-of-type(2){ background: lime; }

.box>div:nth-of-type(3){ background: lightseagreen; }

.box>div:nth-of-type(4){ background: orange; }

.box>div:nth-of-type(5){ background: darkorchid; }

.box>div:nth-of-type(6){ background: pink; }

.box>div:nth-of-type(1){ transform: translateZ(-50px); }

.box>div:nth-of-type(2){ transform: rotateX(90deg) translateZ(50px); }

.box>div:nth-of-type(3){ transform: rotateX(90deg) translateZ(-50px); }

.box>div:nth-of-type(4){ transform: rotateY(90deg) translateZ(50px);}

.box>div:nth-of-type(5){ transform: rotateY(90deg) translateZ(-50px);}

.box>div:nth-of-type(6){ transform: translateZ(50px); }

效果

html怎么画一个正方形,css3画一个正方体相关推荐

css3画一个三角形,css3 画三角形
/*箭头向上*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid ...
html实现画苹果,基于CSS3画一个iPhone
实现效果: 实现代码 html css3 html, body { height: 100%; } body { text-align: center; padding: 50px; backgrou ...
python3 turtle画正方形、矩形、正方体、五角星、奥运五环
python3 环境 turtle模块分别画出正方形.矩形.正方体.五角星.奥运五环 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:H ...
OpenGL学习笔记(2) 画一个正方形
画一个正方形其实,画正方形就是画两个三角形,用四个顶点以及使用索引来实现完整代码在Square项目的Application.cpp里先贴上窗口初始化代码 void BaseInit() {glf ...
java 正方形字符串_java编程：怎么画一个正方形?
问题描述: java编程:怎么画一个正方形? 不用applet,只是application编程,用java怎么画一个蓝色的正方形(最好实心和空心的各画一个). -------------------- ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
html设计动画小黄人,用纯css3画一个小黄人并实现动画效果
[摘要] 本文用纯css3画出一个动态的小黄人页面,代码简洁高效,是一个非常实用的CSS3学习案例. 不得不说CSS3的出现让网页更加绚丽生动,以前需要用图片来实现的效果现在完全可以通过几段css来解 ...
如何用c语言画个叮当猫,如何使用CSS3画出一个叮当猫
刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接 ...
用css3画一个哆啦A梦
今天偶然看到朋友用纯css3画了一个素描杯,很受启发,css3这么好玩的代码再不玩就要荒废了,于是决定画个哆啦A梦来复习一下css基础知识.用css作画最重要的就是要做好定位,其次是通过边框属性来切割 ...

html怎么画一个正方形,css3画一个正方体

html怎么画一个正方形,css3画一个正方体相关推荐

最新文章

热门文章