seo数据/深圳网站搜索优化
文章目录
- 前言
- 实现过程
- 1.步骤
- 2.代码
- 3.效果
前言
使用css3实现立方体旋转效果。
实现过程
1.步骤
立方体旋转效果实现步骤:1、使用ul li创建立方体的6个面，用绝对定位方式将6个面重合在一块2、保持一个面不动，移动和旋转其他5个面，组成立方体，使用3d效果和景深的方式实现立体效果（rotate旋转,X为水平轴，Y为垂直轴，Z为眼睛垂直屏幕的轴）3、设置动画效果，沿着Y轴旋转，旋转原点为X\Y\Z的中心点
2.代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 500px;height: 500px;border: 3px #7195B7 solid;margin: 100px auto;/* 景深,看物体的远近 */perspective: 1500px;}.box ul{width: 300px;height: 300px;border: 1px #A9A9A9 solid;margin: 100px;/* 父元素设置3d效果 */transform-style: preserve-3d;/* 旋转动画效果 */animation: move 2s infinite linear;/* 设置Y轴旋转的原点 */transform-origin: center center 150px; }.box ul li{width: 300px;height: 300px;list-style: none;text-align: center;line-height: 300px;font-size: 35px;color: #FFFFFF;/* 多个li元素组合在一起 */position: absolute;}/* 子元素移动旋转,组成正方体 */.box ul li:nth-of-type(1){background-color: red;opacity: 0.4;}.box ul li:nth-of-type(2){background-color: blue;transform: translateX(-300px) rotateY(90deg);transform-origin: right;opacity: 0.4;}.box ul li:nth-of-type(3){background-color: green;transform: translateY(300px) rotateX(90deg);transform-origin: top;opacity: 0.4;}.box ul li:nth-of-type(4){background-color: greenyellow;transform: translateY(-300px) rotateX(-90deg);transform-origin: bottom;opacity: 0.4;}.box ul li:nth-of-type(5){background-color: firebrick;transform: translateX(300px) rotateY(-90deg);transform-origin: left;opacity: 0.4;}.box ul li:nth-of-type(6){background-color: palevioletred;transform: translateZ(300px);opacity: 0.4;}/* 设置沿着Y轴旋转 */@keyframes move{from{transform: rotateY(0deg);}to{transform: rotateY(360deg);}}</style></head><body><div class="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div></body>
</html>3.效果
