CSS水平垂直翻转效果

最新推荐文章于 2024-07-23 14:13:22 发布

最骚的就是你

最新推荐文章于 2024-07-23 14:13:22 发布

阅读量6.6k

点赞数

分类专栏： web前端学习文章标签： css 垂直水平翻转特效

本文链接：https://blog.csdn.net/libin_1/article/details/51925737

版权

本文介绍了如何使用CSS来实现元素的水平和垂直翻转特效，参考了多个相关文章，详细讲解了翻转的实现原理和代码示例。

摘要由CSDN通过智能技术生成

参考文章：http://www.cnblogs.com/libin-1/p/5770699.html
http://www.cnblogs.com/zhenwen/p/5805095.html

http://www.cnblogs.com/libin-1/p/5813050.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title></title>
        <style>
            a {
                display: block;
                float: left;
                margin: 10px 50px 10px 50px;
                color: red;
                border: 1px solid blue;
            }

            .a {
                transition: All 1s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .a:hover {
                transform: rotate(360deg);
            }

            .b {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .b:hover {
                transform: scale(1.2);
            }

            .c {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .c:hover {
                transform: rotate(360deg) scale(1.2);
            }

            .d {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .d:hover {
                trans

最低0.47元/天解锁文章

最骚的就是你

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS水平垂直翻转效果

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> a { display: block; float: left; ma
复制链接

扫一扫

专栏目录