用CSS实现3D 滚动的立方体
2024-08-27 02:01:20
用css3写3D立方体用到的属性不多,就那么几个:perspective,transform-style,以及transform。
目前来说能完美支持3D的浏览器有chrome、safari,火狐也支持。所以本文的css3代码都只加了webkit前缀,因为产生3D的关键属性perspective其他浏览器都不支持,所以其他浏览器是应该是看不了3D的,所以看本文的例子请用chrome或者safari来看哦。
代码:
<!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>
最新文章
- RHEL6.4 + Oracle 11g DG测试环境快速搭建参考
- IIS 启用CORS ,IISExpress 通过IP 访问
- Q114第一颗二叉查找树(链式)
- volley 应用 GET POST请求 图片异步加载
- 霸气的jQ插件
- phpmyadmin使用中碰到的一些问题
- phpstrom 7.0 序列号
- 让IE浏览器支持CSS3圆角的方法
- 如何提高banner设计含量--网上的一篇文章--感悟
- mac mysql下载
- CSSHack 兼容性
- POJ - 3666 Making the Grade(dp+离散化)
- IO的五种模型
- 重装助手教你如何禁用Windows 10快速启动
- Oracle Database 快捷版 安装 连接
- 二进制按位与(&;)&#160;按位或(|)&#160;&#160;异或运算(^)
- springboot启动的时候日志缺少Mapping日志等
- notpad++常用操作与快捷键
- 如何使用Senparc.Weixin SDK 底层的Redis缓存并设置过期时间
- Centos7升级gcc版本方法之一使用scl软件集