CSS实现3D切换功能的代码示例

来源：懂视网责编：小采时间：2020-11-02 22:14:19

CSS实现3D切换功能的代码示例

CSS实现3D切换功能的代码示例:本篇文章给大家带来的内容是关于CSS实现3D切换功能的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html> <head> <title>Demo</title> <styl

推荐度：

点击下载本文 文档为doc格式

导读CSS实现3D切换功能的代码示例:本篇文章给大家带来的内容是关于CSS实现3D切换功能的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html> <head> <title>Demo</title> <styl

本篇文章给大家带来的内容是关于CSS实现3D切换功能的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE html>
<html>
<head>
 <title>Demo</title>
 <style>
 #app{
 width: 100px;
 height: 35px;
 background-color: #006600;
 text-align: center;
 line-height: 35px;
 position: relative;
 transform-style: preserve-3d;
 transition: all 0.3s linear;
 }
 #app:hover{
 transform: rotateX(90deg);
 transition: all 0.3s linear;
 -webkit-transform-origin: 50% 0;
 }
 #app:before{
 position: absolute;
 top: 100%;
 left: 0;
 content: attr(data-hover);
 width: 100px;
 height: 35px;
 transform: rotateX(-90deg);
 transition: all 0.3s linear;
 transform-origin: 50% 0;
 text-align: center;
 line-height: 35px;
 background-color: red;
 }
 </style>
 
<div>
 <div id="app" data-hover="asdasdasd">
 asdasdasd
 </div>
</div>
</body>
</html>

【相关推荐：CSS视频教程】

CSS实现3D切换功能的代码示例

推荐度：

点击下载本文 文档为doc格式

标签：代码效果实例

热门焦点

CSS实现3D切换功能的代码示例

CSS实现3D切换功能的代码示例

CSS实现3D切换功能的代码示例

最新推荐

猜你喜欢

热门推荐