transform动画的一个3D的正方体盒子
2024-10-19 10:25:41
<!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>Document</title>
<style>
/* 清除浏览器的内边距和外边距 */ * {
margin: ;
padding: ;
}
/* 这是外面大盒子的样式 */
#box {
/* 给大盒子一个宽度和高度 */
width: 200px;
height: 200px;
/* 让他离顶部250像素居中对齐 */
margin: 250px auto;
/* 这里是给他子级的一个相对定位 */
position: relative;
/* 这里把原有的模型转换为3D状态 */
transform-style: preserve-3d;
/* 这里在给他一个透视的视角 */
transform: perspective(800px);
/* 这里是调用下面的@keyframes 参数 linear代表匀速，infinite代表一直循环*/
animation: ro 6s linear infinite;
} #box>div {
width: 200px;
height: 200px;
/* 这里是里离他的父级头部和左部为零一样 宽高 */
position: absolute;
top: ;
left: ;
/* 这里是动画的一个过渡效果执行0.5s完成 */
transition: .5s;
} #box>.top {
/* 这里是插入背景图片 */
background: url("田勇.jpg");
/* 设置背景图片和盒子大小宽高一样 */
background-size: % %;
/* 这是设置他的动画向Y轴负一百像素 X轴旋转90度 */
transform: translateY(-100px) rotateX(90deg)
} #box>.bottom {
background: url("田勇.jpg");
background-size: % %;
transform: translateY(100px) rotateX(90deg)
} #box>.left {
background: url("田勇.jpg");
background-size: % %;
transform: translateX(-100px) rotateY(90deg)
} #box>.right {
background: url("田勇.jpg");
background-size: % %;
transform: translateX(100px) rotateY(90deg)
} #box>.prev {
background: url("田勇.jpg");
background-size: % %;
transform: translateZ(-100px)
} #box>.back {
background: url("田勇.jpg");
background-size: % %;
transform: translateZ(100px)
} /* 这是里面内的盒子的样式 方法跟外面盒子一样 */
.box1 {
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
position: relative;
transform-style: preserve-3d;
} #box>.box1>div {
width: 100px;
height: 100px;
position: absolute;
top: ;
left: ;
transition: .5s;
opacity: ;
} #box>.box1>.top1 {
background: url("田勇.jpg");
background-size: % %;
transform: translateY(-50px) rotateX(90deg)
} #box>.box1>.bottom1 {
background: url("田勇.jpg");
background-size: % %;
transform: translateY(50px) rotateX(90deg)
} #box>.box1>.left1 {
background: url("田勇.jpg");
background-size: % %;
transform: translateX(-50px) rotateY(90deg)
} #box>.box1>.right1 {
background: url("田勇.jpg");
background-size: % %;
transform: translateX(50px) rotateY(90deg)
} #box>.box1>.prev1 {
background: url("田勇.jpg");
background-size: % %;
transform: translateZ(-50px)
} #box>.box1>.back1 {
background: url("田勇.jpg");
background-size: % %;
transform: translateZ(50px)
}
/* 这里是定义他的一个动画的进度效果 */
@keyframes ro {
% {
transform: rotate() rotateX(45deg) rotateY(-180deg);
}
% {
transform: rotate(360deg) rotateX(45deg) rotateY(180deg);
}
}
/* 这里的hover是当鼠标移入在大盒子 上面就会发生的动画 translateY是改变移动的方向有X轴和Y轴和Z轴 */
#box:hover>.top {
transform: translateY(-150px) rotateX(90deg)
} #box:hover>.bottom {
transform: translateY(150px) rotateX(90deg)
} #box:hover>.left {
transform: translateX(-150px) rotateY(90deg)
} #box:hover>.right {
transform: translateX(150px) rotateY(90deg)
} #box:hover>.prev {
transform: translateZ(-150px)
} #box:hover>.back {
transform: translateZ(150px)
}
</style>
</head> <body>
<!-- 这是外面的盒子 -->
<div id="box">
<!-- 这是里面的盒子 -->
<ul class="box1">
<div class="top1"></div>
<div class="bottom1"></div>
<div class="left1"></div>
<div class="right1"></div>
<div class="prev1"></div>
<div class="back1"></div>
</ul>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="prev"></div>
<div class="back"></div>
</div>
</body> </html>
最新文章
- EpochConverter
- Java 使用GDAL 读写 shapefile
- InnoDB为什么要使用auto_Increment
- easyUI dialog 弹窗 居中显示
- CSS学习笔记之定位
- Android之Activity的几种跳转方式
- 转 jquery 学习笔记
- poj 3897 Maze Stretching 二分+A*搜索
- 5.Struts2的OGNL表达式
- js设计模式--单体模式
- mongoose populate
- linux屏幕扩展、扩展屏幕的校准
- ES6随手学
- VSCode的使用
- Scala - 快速学习05 - 数据结构
- 【深入分析Java Web技术内幕】2、深入分析Java I/O的工作机制
- 修改ssh远程默认端口
- dj cookie & session组件
- android自动弹出软键盘（输入键盘）
- 如何使用angularjs实现抓取页面内容