css3动画图片变形，自定义字体

最新推荐文章于 2024-04-12 05:20:57 发布

大猫先生

最新推荐文章于 2024-04-12 05:20:57 发布

阅读量691

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/qq_17392301/article/details/48667361

版权

css3 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .rotatedElement
            {
                -ms-transform:scale(1.5) scaleX(10px) skew(10deg);
                -webkit-transform: scale(1.5) scaleX(10px) skew(10deg);
                transform: scale(1.5) scaleX(10px) skew(10deg);

                -ms-transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);   
            }
            .gallery
            {
                margin: 0px 30px 0px 30px;
                background: #d8eefe;
                padding: 10px;
            }
            .gallery img
            {
                margin:5px;
                padding: 5px;
                width: 75px;
                border: solid 1px black;
                background: white;  
                -ms-transition: all 1s ease 0s;
                -webkit-transition: all 1s ease 0s;
                transition: all 1s ease 0s;         
            }
            .gallery img:hover
            {
                -ms-transform: scale(2.2) rotate(10deg);
                -webkit-transform: scale(2.2) rotate(10deg);
                transform: scale(2.2) rotate(10deg);
            }
            @font-face {
                font-family:'3Dumb';
                /*src: url('3Dumb.ttf');*/
                src:url('BlackCasper.ttf');
                src:local('moa'),
                url('BlackCasper.ttf') format('truetype');
            }
            h1{
                font-family:'3Dumb';
            }

        </style>
    </head>
    <body>
        <h1>Cute Animal Page</h1>
        <div class="gallery">
        <img src="http://prosetech.com/html5/Chapter%2006/bunny.jpg">
        <img src="http://prosetech.com/html5/Chapter%2006/cat.jpg">
        <img src="http://prosetech.com/html5/Chapter%2006/dog.jpg">
        <img src="http://prosetech.com/html5/Chapter%2006/platypus.jpg">
        <img src="http://prosetech.com/html5/Chapter%2006/goose.jpg">
        </div>

    </body>
</html>

大猫先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画图片变形，自定义字体

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .rotatedElement { -ms-transform:scale(1.5) scaleX(10px)
复制链接

扫一扫