写点什么

两面翻转盒子案例(3d 效果)

用户头像
赫鲁小夫
关注
发布于: 2021 年 04 月 06 日
两面翻转盒子案例(3d效果)





<!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>3d效果</title> <style> body { perspective: 350px; } .box { position: relative; width: 300px; height: 300px; margin: 100px auto; transition: all .4s; transform-style: preserve-3d; } .box:hover { transform: rotateY(180deg); } .front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; font-size: 30px; color: #fff; text-align: center; line-height: 300px; } .front { background-color: pink; z-index: 1; } .back { background-color: purple; transform: rotateY(180deg); } </style></head>
<body> <div class="box"> <div class="front">我嫉妒你的爱</div> <div class="back">气势如虹</div> </div></body>
</html>
复制代码

这是一个翻转的原型案例,内容是《天后》里的一句歌词,这只是最基础的,读者可以根据代码进行修改,比如背景用图片,css 中的 3d 应用,我们灵巧应用可以使 web 更加好看,设计更加精妙。

有关 css 内容,读者可以在网络上找手册学习,或者私信。


发布于: 2021 年 04 月 06 日阅读数: 11
用户头像

赫鲁小夫

关注

还未添加个人签名 2021.02.23 加入

还未添加个人简介

评论

发布
暂无评论
两面翻转盒子案例(3d效果)