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 ...
随机推荐
- 把KB转化为KB及以上单位
/** * 把KB转化为KB及以上单位 * @param int $kb * @return string $new_val */ function return_over_kb($kb) { $kb ...
- js:自动亮起100盏灯
1) 使用js在页面上显示100盏灯,并标记从1到100的编号2) 页面加载后3秒,从编号是1的灯依次自动亮起.3) 每过0.5秒亮下一盏灯(10分)4) 所有灯亮起后,弹出确 ...
- 学习笔记：IIS搭建PHP网站出现404错误的解决办法
关于404错误提示相信大家都遇到过吧,记得我遇到这个问题的时候,弄得我焦头烂额的,今天给大家分享下,使用IIS大家PHP网站时出现404错误提示的处理方法,希望对各位朋友有所帮助.IIS搭建PHP出现 ...
- Sql Server增加Sequence序列语句
1.创建序列 下面的示例创建名为 DecSeq 使用一个序列 十进制 具有介于 0 到 255 之间的数据类型.序列以 125 开始,每次生成数字时递增 25. 因为该序列配置为可循环,所以,当值超过 ...
- Mybatis学习---Mybatis分页插件 - PageHelper
1. Mybatis分页插件 - PageHelper说明 如果你也在用Mybatis,建议尝试该分页插件,这个一定是最方便使用的分页插件. 该插件目前支持Oracle,Mysql,MariaDB,S ...
- 对1001. A+B Format (20)的描述
Github仓库的链接 https://github.com/deepYY/object-oriented/blob/master/A-B-Format/A.B.Format.c 解题思路: 输入a, ...
- SAP ABAP里数据库表的Storage Parameters从哪里来的
如何查看ABAP数据库表的storage parameter? 事务码SE11,utilities->Database Object->Database Utility: 点这个Stora ...
- 纯css3跑马灯demo
我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡.但是css3样式一般不会.这里主要的思路就是用css3代替js定时器实现一 ...
- 协议森林08 不放弃 (TCP协议与流通信)
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! TCP(Transportation Control Protocol)协议与IP ...
- Excel对同样项求和
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/yeweiouyang/article/details/32107423 方法一(SUMIF公式求和) ...