CSS: double coin
2022/2/7 23:52:30
本文主要是介绍CSS: double coin,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ position: relative; width: 300px; height: 300px; margin: 100px auto; font-size: 40px; line-height: 300px; text-align: center; color: #fff; transition: all 1s; transform-style: preserve-3d; } .box:hover{ transform: rotateY(180deg); } .front,.back{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; } .front{ background-color: palegoldenrod; z-index: 1; } .back{ background-color: peru; transform: rotateY(180deg); } </style> </head> <body> <div class="box"> <div class="front">front</div> <div class="back">back</div> </div> </body> </html>
这篇关于CSS: double coin的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-10深入浅出TailwindCSS开发:快速上手与实战技巧
- 2024-09-10尾风CSS开发:快速上手与实战指南
- 2024-09-10从零开始:深入TailwindCSS项目实战,快速上手构建高效网站
- 2024-09-10尾风CSS项目实战:初级用户快速上手指南
- 2024-09-07TailwindCSS从入门到实践:全面指南
- 2024-09-05Tailwind.css入门:快速上手指南
- 2024-08-29CSS9资料:入门级CSS教程与实用技巧指南
- 2024-08-29CSS定位资料大全:初学者入门指南
- 2024-08-29CSS 浮动资料:入门级教程与实践
- 2024-08-29CSS样式入门:快速获取与掌握CSS样式资料的指南