<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8" /> <title>3D旋转5边型</title> <style type="text/css"> .container { perspective: 500px; width: 200px; height: 200px; margin: 200px auto 0; } .face-box { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transform-origin: 50% 50%; animation: rotatea 15s linear infinite alternate; } @keyframes rotatea { 100% { transform: rotateX(360deg); } } .face-box .face { position: absolute; width: 200px; height: 200px; font-size: 100px; text-align: center; line-height: 200px; } .one{ background: rgba(0, 0, 255, 1); transform: rotateX(0deg) translateZ(138px); } .two { background: rgba(255, 0, 255, 1); transform: rotateX(288deg) translateZ(138px); } .three{ background: rgba(0, 255, 255, 1); transform: rotateX(216deg) translateZ(138px); } .four{ background: rgba(255, 0, 0, 1); transform: rotateX(144deg) translateZ(138px); } .five { background: rgba(0, 255, 0, 1); transform: rotateX(72deg) translateZ(138px); } </style></head><body> <div class="container"> <div class="face-box"> <div class="face one">1</div> <div class="face two">2</div> <div class="face three">3</div> <div class="face four">4</div> <div class="face five">5</div> </div> </div></body></html>
【css实现五边形旋转效果代码】
推荐阅读
- php使用百度API实现人脸识别
- Redis Sentinel基本实现原理
- CSS 垂直居中的七种方法，值得收藏
- PHP实现SESSION共享
- LRU算法详解及最简单的Java实现
- 360搜索的百亿级网页搜索引擎的架构设计与实现
- 微信“拍一拍”，竟然可以使用Python实现
- 如何快速实现在网络上赚钱 网上快速赚钱的方法
- 上海闸北区共和新路街道实现茶艺推广全覆盖
- python 实现网站微信登录