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 ...
随机推荐
- [Angular 6] 初学angular，环境全部最新，[ ng serve ] 不能启动，卡在 95% 不动 => 解决方案
2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...
- 《JAVA与模式》之模板方法模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...
- 五：MyBatis学习总结(五)——实现关联表查询
一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...
- ERROR StatusLogger Log4j2 could not find a logging implementation. Please add log4j-core to the classpath. Using SimpleLogger to log to the console...
Struts2未配置Log4j2.xml报错 Log4j2.xml中的配置 log4j的jar包:log4j-core-2.7.jar log4j2只支持xml和json两种格式的配置,所以配置log ...
- A Node Influence Based Label Propagation Algorithm for Community detection in networks 文章算法实现的疑问
这是我最近看到的一篇论文,思路还是很清晰的,就是改进的LPA算法.改进的地方在两个方面: (1)结合K-shell算法计算量了节点重重要度NI(node importance),标签更新顺序则按照NI ...
- Spring Security构建Rest服务-0100-前言
一.我的前言 这是看慕课网老师讲的SpringSecurity的学习笔记,老师讲的很好,开篇就说到了我的心里,老师说道: 有一定经验的程序员如何提升自己? 1,每天都很忙,但是感觉水平没有提升 2,不 ...
- oracle_jdbc_insert_into
package com.ayang.jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql.S ...
- 【jQuery源码】select方法
/** * select方法是Sizzle选择器包的核心方法之一,其主要完成下列任务: * 1.调用tokenize方法完成对选择器的解析 * 2.对于没有初始集合(即seed没有赋值)且是单一块选择 ...
- 编写dimgr脚本学到的知识及技巧
编写dimgr是为了管理手机上的镜像,在此总结下过程中学到的知识及技巧(不讨论具体用法). 参数处理 以往处理脚本参数直接用循环加判断语句,若是脚本只有简单参数,这无疑是简便可行的方法.但当需要处理复 ...
- zk使用原理
ZooKeeper的基本原理 ZNode的基本概念 ZooKeeper数据模型的结构与Unix文件系统很类似,整体上可以看作是一棵树,每个节点称做一个ZNode.每个ZNode都可以通过其路径唯一标识 ...