用CSS实现3D 滚动的立方体
代码：
<!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>CSS鼠标移入效果</title>
<style>
*{margin: 0px;padding: 0px;}
body{background: #222;}
div.wrap{
width: 200px;
perspective: 1000px;/*景深*/
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);/*移动*/
}
.cube{
width: 200px;
height:200px;
position: relative;
transform-style: preserve-3d;/*所有子元素在3D空间中呈现*/
transform: rotateX(-50deg) rotateY(50deg) rotateZ(0deg);
animation: move 8s infinite linear;
}
.cube>div{
width: 100%;
height: 100%;
background: #000;
position: absolute;
box-shadow: 0 0 30px currentColor;
}
.cube:hover div{
background: currentColor;
box-shadow: 0 0 60px currentColor;
}
.cube .out_front{
color: red;
transform: translateZ(100px);
}
.cube .out_back{
color: orange;
transform: translateZ(-100px);
}
.cube .out_left{
color: blue;
transform: translateX(-100px) rotateY(-90deg);
}
.cube .out_right{
color: green;
transform: translateX(100px) rotateY(90deg);
}
.cube .out_top{
color: aqua;
transform: translateY(-100px) rotateX(-90deg);
}
.cube .out_bottom{
color: purple;
transform: translateY(100px) rotateX(90deg);
} /*帧动画*/
@keyframes move{
0%{
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;
}
100%{
transform:rotateX(720deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="out_front"></div>
<div class="out_back"></div>
<div class="out_left"></div>
<div class="out_right"></div>
<div class="out_top"></div>
<div class="out_bottom"></div>
</div>
</div>
</body>
</html>
用CSS实现3D 滚动的立方体的更多相关文章
- 简单聊聊CSS中的3D技术之“立方体”
简单聊聊CSS中的3D技术之“立方体” 大家好,我是今天的男一号,我叫小博主. 今天来聊一下我在前端“逆战班”学习中遇到的颇为有趣的3D知识.前端学习3周,见识稀疏,在下面的分享中如有不对的地方请大家 ...
- html + css 01: 3d立方体
html + css实现3d立方体 css代码 /*页面背景色*/ body{ background-color: black; background-repeat:no-repeat; } /*** ...
- Space.js – HTML 驱动的页面 3D 滚动效果
为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...
- html5和css3实现的3D滚动特效
今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="container"&g ...
- 译-使用Scroll Snapping实现CSS控制页面滚动
特别声明,本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文,受限于译者能力,译文或存在不足,欢迎大家指出.如需转 ...
- 纯CSS实现3D正方体动画效果
前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图
- 用css实现3D立方体旋转特效
先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...
- css实现3D立方体旋转特效
先来看运行后出来的效果 它是在不停运行的一个立方体 先来看html部分的代码 <div class="rect-wrap"> <!--舞台元素,设置perspec ...
- 纯CSS绘制3D立方体
本篇记录的是使用CSS3绘制3D立方体,并旋转起来. 我的思路: 1️⃣ 首先,用div元素画6个正方形摞在一起放在画布中间.为了区分,分别给每个div选择了不同的颜色,并且设置为半透明方便透视. 2 ...
随机推荐
- 2018.10.17校内模拟赛：T2神光
题面:pdf 首先排序,二分,然后怎么判定是否可行. 最简单的思路是,dp[i][j][k],到第i个,用了j次红光,k次绿光,前i个点都选上了,是否可行.然后转移就行. 然后考试的时候就想到这了,往 ...
- Android：反编译apk
一.所需工具 1. apktool (1)作用:获取资源文件,例如图片.布局文件 (2)下载地址:https://bitbucket.org/iBotPeaches/apktool/downloads ...
- web存储机制（localStorage和sessionStorage）
web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享) 1.sessionStorage 数据放在服务器上(IE不支持) 严格用于 ...
- Qt 利用XML文档，写一个程序集合 二
接上一篇文章https://www.cnblogs.com/DreamDog/p/9213915.html XML文档的读写 一个根节点,下面每一个子节点代表一个子程序,内容为子程序名字,图标路径,e ...
- [转]50 Tips for Working with Unity (Best Practices)
About these tips These tips are not all applicable to every project. They are based on my experience ...
- Teaching Machines to Understand Us 让机器理解我们 之三 自然语言学习及深度学习的信仰
Language learning 自然语言学习 Facebook’s New York office is a three-minute stroll up Broadway from LeCun’ ...
- shell基础 -- grep、sed、awk命令简介
在 shell 编程中,常需要处理文本,这里介绍几个文本处理命令. 一.grep 命令 grep 命令由来已久,用 grep 命令来查找 文本十分方便.在 POSIX 系统上,grep 可以在两种正则 ...
- ZOJ 3962
就是统计1~n中出现的各个数字的次数,当然是在16进制下. 不过有个区间问题的小技巧,统计从 [x,y] 可以转换成 从 [1,y] 减去 [1,x-1]. 不过要分类讨论一下,因为有可能会出现溢出, ...
- SQL判断是否存在
判断数据库是否存在 ifexists(select*frommaster..sysdatabaseswherename=N’库名’) print’exists’ else print’notexist ...
- Druid Monitor小记
继上篇DruidDataSource源码分析之后 , 公司又要求做一个Druid的数据库监控 , 以及spring监控 , 研究一小时 , 总结出了一点经验 , 特此贴出来分享一下 一 . 利用Dru ...