css3魔方测试
来源:互联网 发布:it设备维修流程图 编辑:程序博客网 时间:2024/05/18 01:07
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="css3d-demo.css">
<body>
<div class="stage">
<div class="cube Animation-spin">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="right"></div>
<div class="left"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
css3 代码:
* {
margin: 0;
padding: 0;
}
/*背景色径向渐变*/
html {
background: radial-gradient(#2A7E20, #215F11, #233C0A);
width: 100%;
height: 100%
}
/*展示舞台*/
.stage {
perspective: 1000px;
height: 20em;
width: 20em;
position: absolute;
left: 50%;
top: 50%;
margin-left: -10em;
margin-top: -10em;
}
/*魔方*/
.cube {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
/*视角*/
transform: rotateX(-20deg) rotateY(-20deg);
}
.cube div {
background: linear-gradient(rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
/*浏览器兼容性有问题*/
/*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-size: 5em 5em;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(54, 226, 248, 0.5);
box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
}
.front {
transform: translateZ(10em);
}
.back {
transform: translateZ(-10em);
}
.left {
transform: rotateY(-90deg) translateZ(10em);
}
.right {
transform: rotateY(90deg) translateZ(10em);
}
.top {
transform: rotateX(90deg) translateZ(10em);
}
.bottom {
transform: rotateX(-90deg) translateZ(10em);
}
/*定义动画帧*/
@keyframes spin {
from {
transform: translateZ(-10em) rotateX(0) rotateY(0);
}
/*初始位置*/
to {
transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);
}
/*结束位置*/
}
/*动画*/
.Animation-spin {
animation: spin 6s ease-in-out infinite;
}
- css3魔方测试
- css3实现简易魔方
- css3简易魔方绘制
- css3制作魔方
- CSS3 3D魔方
- CSS3 3D旋转魔方
- CSS3动画魔方案列
- 魔方
- 魔方
- 魔方
- 魔方
- 魔方
- 魔方
- 魔方
- 魔方
- 魔方
- 魔方
- 魔方
- angular4、angular4.0从入门到实战 打造股票管理网站 1.子路由 2. 路由传参三种方式 3. 路由守卫
- 获得多个字段分组语句
- uva156(标准化+map)反片语
- 秋招笔记
- Android Study 之聊聊关于图片压缩那点事儿
- css3魔方测试
- 电商推荐算法应用
- 【面经笔记】红云融通电话二面
- ImgNet Top-5
- 206. Reverse Linked List
- 第K大的数
- CSU
- 秒杀99%的海量数据处理面试题(一)
- java 自己写的一个自动分析对象的mysql数据库操作工具