transform动画的一个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>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>
transform动画的一个3D的正方体盒子的更多相关文章
- WPF 3D：简单的Point3D和Vector3D动画创造一个旋转的正方体
原文:WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体 运行结果: 事实上很简单,定义好一个正方体,处理好纹理.关于MeshGeometry3D的正确定义和纹理这里就不多讲 ...
- CSS3D动画制作一个3d旋转的筛子
希望这个demo能让大家理解CSS3的3d空间动画(其实是个假3D) 首先给一个3d的解剖图,x/y/z轴线轴线已经标出 下面附上添加特效的动画旋转 可以根据demo并参考上面解剖图进行理解 < ...
- 一个3D正方体
一个小例子,3D的正方体 <!DOCTYPE html> <html oncontextmenu=self.event.returnValue=false onselectstart ...
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...
- 3d转换-正方体-Html5Css3-遁地龙卷风
(-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...
- 使用 CSS3 动画实现的 3D 图片过渡特效
这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...
- 第一章 用three.js创建你的第一个3D场景
第一章 用three.js创建你的第一个3D场景 到官网下载three.js的源码和示例. 创建HTML框架界面 第一个示例的代码如下: 01-basic-skeleton.html 位于 Learn ...
随机推荐
- redis安装、配置、启停
Redis is an open source (BSD licensed), in-memory data structure store, used as database, cache and ...
- sql查询学习和实践点滴积累
https://blog.rjmetrics.com/2008/10/28/correlated-subqueries-in-mysql/ http://www.mysqltutorial.org/m ...
- APACHE如何一个站点绑定多个域名？
大家肯定遇到过这样的情况,需要APACHE2里一个站点绑定多个域名,那么如何操作呢?用ServerAlias 以前很笨,要使多个域名指向同一站点总是这样写: ServerAdmin admin@dom ...
- Zip压缩/解压缩（文件夹）
#PS2.0压缩为.zip文件: $zip = "D:\audit_log\test.zip"New-Item $zip -ItemType file$shellApplicati ...
- December 27th 2016 Week 53rd Tuesday
A journey of one thousand miles begins with one step. 千里之行始于足下. No matter how slowly you walk, as lo ...
- linux下常用命令：
常用指令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir ...
- 微服务、rest/restful、springmvc、http简要梳理
微服务简介 微服务是一个新兴的软件架构,就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务.一个微服务的策略可以让工作变得更为简便,它可扩展单个组件而不是整个的应用程序.简而言之,微服务架构是 ...
- 基础知识：Promise（整理）
基础知识:Promise(整理) (来自牛客网)下面关于promise的说法中,错误的是(D) A. resolve和reject都是直接生成一个进入相应状态的promise对象,其参数就是进入相应状 ...
- kubernetes 入门学习
kubernetes 学习 kubernetes 简介 Kubernetes这个名字源自希腊语,意思是"舵手",也是"管理者","治理者"等 ...
- UVa 11346 - Probability（几何概型）
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...