CSS3D动画制作一个3d旋转的筛子
希望这个demo能让大家理解CSS3的3d空间动画(其实是个假3D)
首先给一个3d的解剖图，x/y/z轴线轴线已经标出
下面附上添加特效的动画旋转
可以根据demo并参考上面解剖图进行理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html{
height: 100%;
}
body{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
perspective: 1000px;
transform-style: preserve-3d; }
section{
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: zhuan 16s infinite linear; }
div{
width: 300px;
height: 300px;
background-color: orange;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
position: absolute;
box-shadow: 0 0 300px green;
opacity: 0.8;
}
div:nth-child(1){
transform: translateZ(300px);
border-radius: 50%;
box-shadow: 0 0 500px orange;
opacity: 0.4;
}
div:nth-child(2){
transform: rotateX(90deg) translateZ(300px);
align-items: center;
justify-content: space-around;
flex-direction: column;
border-radius: 50%;
box-shadow: 0 0 500px orange;
opacity: 0.4;
}
div:nth-child(3){
transform: rotateY(90deg) translateZ(300px);
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
border-radius: 50%;
box-shadow: 0 0 500px orange;
opacity: 0.4;
}
div:nth-child(3) p:nth-child(2){
align-self: center;
}
div:nth-child(3) p:nth-child(3){
align-self: flex-end;
}
div:nth-child(4){
transform: translateZ(-300px);
flex-wrap: wrap;
border-radius: 50%;
box-shadow: 0 0 500px orange;
opacity: 0.4;
}
div:nth-child(5){
transform: rotateX(90deg) translateZ(-300px);
border-radius: 50%;
box-shadow: 0 0 500px orange;
opacity: 0.4;
}
div:nth-child(6){
transform: rotateY(90deg) translateZ(-300px);
border-radius: 50%;
box-shadow: 0 0 500px orange;
opacity: 0.4;
}
.low{
width: 300px;
height: 150px;
display: flex;
}
.low:nth-child(1){
align-items: flex-end;
justify-content: center;
}
.low:nth-child(2){
align-items: flex-start;
justify-content: center;
}
.stree{
width: 300px;
height: 33.33%;
display: flex;
}
.stree:nth-child(1){
justify-content: space-around;
}
.stree:nth-child(2){
justify-content: center;
}
.stree:nth-child(3){
justify-content: space-around;
}
.fore{
width: 300px;
height: 33.33%;
display: flex;
}
.fore:nth-child(1){
justify-content: center;
}
.fore:nth-child(3){
justify-content: center;
}
p{
width: 60px;
height: 60px;
background-color: white;
border-radius: 50%;
box-shadow: 200 60 400px #ccc;
opacity: 0.7;
margin: 10px; }
@keyframes zhuan{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) ;
}
} </style>
</head>
<body>
<section>
<div>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
<div>
<main class="low">
<p></p>
<p></p>
</main>
<main class="low">
<p></p>
<p></p>
</main>
</div>
<div>
<main class="stree">
<p></p>
<p></p>
</main>
<main class="stree">
<p></p>
</main>
<main class="stree">
<p></p>
<p></p>
</main>
</div>
<div>
<main class="fore">
<p></p>
<p></p>
</main>
<main class="stree">
<p></p>
<p></p>
</main>
<main class="fore">
<p></p>
<p></p>
</main>
</div>
</section>
</body>
</html>
CSS3D动画制作一个3d旋转的筛子的更多相关文章
- Coco2dx制作一个3D旋转的效果
建了工程之后修改HelloWorldScene.cpp文件,修改部分为 // on "init" you need to initialize your instance bool ...
- 用CSS伪类制作一个不断旋转的八卦图？
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- transform动画的一个3D的正方体盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用. 书本的3D ...
- CSS动画实例：3D立方体
CSS3支持3D转换,与3D转换有关的属性有: transform:向元素应用 2D或3D 转换. transform-origin:改变被转换元素的位置. transform-style:规定被嵌套 ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- iOS 帧动画之翻转和旋转动画
记录两个比较简单的动画,一个是翻转的动画,一个是旋转的动画. 旋转动画: 1 [UIView animateWithDuration:3 animations:^{ if (formView) { f ...
- WPF 3D：简单的Point3D和Vector3D动画创造一个旋转的正方体
原文:WPF 3D:简单的Point3D和Vector3D动画创造一个旋转的正方体 运行结果: 事实上很简单,定义好一个正方体,处理好纹理.关于MeshGeometry3D的正确定义和纹理这里就不多讲 ...
- 【巩固】CSS3的3D动画 ——3D旋转（1）
最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve ...
随机推荐
- Jmeter监控系统等资源，ServerAgent端口的本次启动端口修改
默认情况下在下载的ServerAgent下,如果服务是windows系统,则直接启动"startAgent.bat"即可,如果是Linux系统,则直接启动"./start ...
- Ubuntu16.04 Nvidia驱动、CUDA安装
安装Nvidia驱动和CUDA时往往很费力,经常有莫名奇妙的错误,这次安装十分顺畅,权当记录一下,以方便以后再次安装. 一.Nvidia显卡驱动安装 sudo add-apt-repository p ...
- easyUI制作slider小滑块，可拖动和精确输入
借助easyUI制作.完善slider小滑块. 可拖动.和在右边输入框精确输入 效果图: html代码: <div class="text_fl" >亮度设置:< ...
- jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- Java之Socket网络编程实践
转自:http://my.oschina.net/leejun2005/blog/104955#comments 一.TCP/IP协议 既然是网络编程,涉及几个系统之间的交互,那么首先要考虑的是如何准 ...
- Windows里如何正确安装Redis以服务运行（博主推荐）（图文详解）
不多说,直接上干货! 注意 : Redis官方并没有提供Redis的windows安装包,但在github上, 有相关的下载地址. 一.Redis的下载地址 相关的下载地址,如下: ...
- jdk1.6 改 jdk1.7或jdk1.8（改回也可以）（图文详解）
不多说,直接上干货! 第一步:设置默认使用的JDK和JRE环境 具体步骤:菜单window->preferences->java->Installed JRES 点中了,右边的窗口 ...
- XMind *思维导图的安装步骤（图文详解）
不多说,直接上干货! XMind中文官网: http://www.xmindchina.net/ 这一款软件,是非常实用和棒,也帮助我了很多地方.推荐给大家 需要正版和激活的,请见博文最下端的QQ技 ...
- 【转】Hadoop vs Spark性能对比
原文地址:http://www.cnblogs.com/jerrylead/archive/2012/08/13/2636149.html 基于Spark-0.4和Hadoop-0.20.2 1. K ...
- 前端通信：ajax设计方案（四）--- 集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...