CSS3实现魔方动画
2024-09-05 00:49:05
本文将借助css3实现魔方动画效果,设计思路如下:
- HTML方面采用六个div容器形成六个立方面;
- CSS方面采用transform-style: preserve-3d;形成三维场景;transform: rotateX(-90deg) translateZ(150px);实现立方面旋转组成立方体;animation: rotate 10s linear infinite alternate;动画效果添加;
效果图:
HTML内容:
<div class="box">
<div class="before">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="back"></div>
</div>
设置before、back等六面分别作为立面的前后左右上下各面;
CSS核心:
@keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
} 20% {
transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
} 40% {
transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
} 60% {
transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
} 80% {
transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
} 100% {
transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
}
} .top {
background-color: transparent;
transform: rotateX(90deg) translateZ(150px);
} .box {
width: 300px;
height: 300px;
margin: 150px auto;
position: relative;
font-size: 50px;
/*perspective: 1000px;*/
transform-style: preserve-3d; animation: rotate 10s linear infinite alternate;
}
- 动画rotate设置不同时间段的立方体旋转角度;
- box容器指定了三维场景以及动画效果;
- top 则将平面旋转(rotateX)、设置距离屏幕距离(translateZ);
如何理解3D场景下perspective与translateZ的关系?
translateZ()
CSS函数沿着z轴在三维空间中重新定位元素,即,从观察者的角度而言更近或者更远。这个变换是由一个<length>
元素定义的,它指定元素向内或向外移动的距离。
perspective
CSS属性决定在z = 0平面和用户之间的距离以便使所述3D定位的元素一些透视效果。z> 0的每个3D元素变大;,每个z <0的三维元素则变小。效果的强度由此属性的值决定。
说明:
- d代表perspective设置的用户目视距屏幕的距离;
- z代表translateZ设置的元素移动距离;
源码来了:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> ul {
list-style: none;
margin:0;
padding:0;
}
.box {
width: 300px;
height: 300px;
margin: 150px auto;
position: relative;
font-size: 50px;
/*perspective: 1000px;*/
transform-style: preserve-3d; animation: rotate 10s linear infinite alternate;
} .box>div {
width: 300px;
height: 300px;
position: absolute;
}
.right {
background-color: transparent;
transform: rotateY(90deg) translateZ(150px);
}
.left {
background-color: transparent;
transform: rotateY(-90deg) translateZ(150px);
} .top {
background-color: transparent;
transform: rotateX(90deg) translateZ(150px);
} .bottom {
background-color: transparent;
transform: rotateX(-90deg) translateZ(150px);
} .before {
background-color: transparent;
transform: translateZ(150px);
} .back {
background-color: transparent;
transform: translateZ(-150px);
} li {
float: left;
width: 90px;
height: 90px;
border-radius: 20px;
margin: 5px;
text-align: center;
line-height: 90px;
} .before li {
background-color: green;
}
.back li {
background-color:chartreuse;
} .top li {
background-color: purple;
} .bottom li {
background-color: cornflowerblue;
} .left li {
background-color: darkorange;
} .right li {
background-color: #37ffc7;
} .box:hover {
animation-play-state: paused;
} @keyframes rotate {
0% {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
} 20% {
transform: rotateY(30deg) rotateX(40deg) rotateZ(20deg);
} 40% {
transform: rotateY(-60deg) rotateX(-40deg) rotateZ(-20deg);
} 60% {
transform: rotateY(145deg) rotateX(80deg) rotateZ(10deg);
} 80% {
transform: rotateY(90deg) rotateX(60deg) rotateZ(-20deg);
} 100% {
transform: rotateY(135deg) rotateX(-45deg) rotateZ(30deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="before">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="back">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="top">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="bottom">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="left">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class="right">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
</body>
</html>
最新文章
- PythonDay02
- word中设置前几页为罗马数字,后几页设置为阿拉伯数字
- C#使用指针复制字节数组
- 误删ext3的恢复方法
- Xcode 7 warnings: object file was built for newer iOS version than being linked
- iOS工程上传AppStore时遇到的问题“ERROR ITMS-90046”解析
- POJ 2778 DNA Sequence(AC自动机+矩阵快速幂)
- Intel 82599网卡异常挂死原因
- jQuery的基本选择器
- Myeclispe下struts-config.xml文件无法图形界面打开
- JavaScript表单验证登录
- ElasticSearch 6.x 父子文档[join]分析
- Emmagee—开源Android性能测试工具
- Java 遍历类中的属性
- gruop by报错this is incompatible with sql_mode=only_full_group_by
- Proxy Hosted Virtual
- oracle ebs常规小看点
- Linux的概念与体系(转)
- linux-git shell colors
- Go语言中的匿名函数和闭包的样子
热门文章
- poj1505(二分+贪心)
- python3 win 建立虚拟环境(virtualenv)
- 刷题75. Sort Colors
- index unique scan 与index range scan等的区别
- 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue
- MySQL学习(九)小结
- UVA 1267 Network(DFS)
- ONESHELL
- Nginx之server和location配置使用
- IntelliJ IDEA 2017.3尚硅谷-----取消标题单行显示