html CSS3-transform的用法

最新推荐文章于 2024-07-04 15:38:12 发布
最新推荐文章于 2024-07-04 15:38:12 发布
阅读量5.8k 收藏 41
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/118942859
版权

CSS3-transform的用法

在这里插入图片描述

1、transform实现位移、缩放、旋转、斜切

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform</title>
    <style type="text/css">

        /*用法一：transform实现位移*/
        .box{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: goldenrod;
            margin: 50px auto 0;
            /*translte位移比定位做的位移性能高，建议使用translate*/
            /*使用transform实现位移操作*/
            transform: translate(0px,0px);
            transition: all 500ms ease;

        }
        .box:hover{
            transform: translate(50px,50px);
        }

        /*用法二：transform实现缩放*/
        .box1{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: goldenrod;
            margin: 200px auto 0;

            /*使用transform实现缩放*/
            transform: scale(1,1);  /*表示水平方向与竖直方向变为原先一倍*/
            transition: all 500ms ease;
        }

        .box1:hover{
            transform: scale(2,2);
        }

         /*用法三：transform实现旋转*/
        .box2{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: goldenrod;
            margin: 200px auto 0;

            /*使用transform实现旋转*/
            transform: rotate(0deg);
            transition: all 500ms ease;
        }

        .box2:hover{
            transform: rotate(45deg);/*表示旋转45度*/
        }

        /*用法四：transform实现斜切*/
        .box3{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: goldenrod;
            margin: 200px auto 0;

            /*使用transform实现斜切*/
            transform: skew(0,0);       /*表示沿x轴进行斜切*/
            transition: all 500ms ease;
        }

        .box3:hover{
            transform: skew(45deg,0)/*表示斜切*/
        }

        /*用法五：transform实现斜切*/
        .box4{
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            background-color: goldenrod;
            margin: 200px auto 0;

            /*使用transform实现斜切*/
            transform: skew(0,0);       /*表示沿y轴进行斜切*/
            transition: all 500ms ease;
        }

        .box4:hover{
            transform: skew(0,45deg)/*表示斜切*/
        }

    </style>
</head>
<body>
        <div class="box"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
</body>
</html>

2、transform设置旋转中心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1,.box2,.box3,.box4{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: gold;
            margin: 30px;
            float: left;

            transition: all 500ms ease;

        }
        .box2{
            transform-origin: left center ;     /*设置旋转中心*/
        }

        .box3{
            transform-origin: left top ;     /*设置旋转中心*/
        }

        .box4{
            transform-origin: 50px 50px ;     /*设置旋转中心，表示50*50的地方*/
        }

        .box1:hover,.box2:hover,.box3:hover,.box4:hover{
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

3、transform实现三维旋转

实现绕Y轴旋转，并设置透视距离

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform设置三维旋转</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: yellow;
            border: 3px solid black;
            margin: 50px auto 0;

            /*transform: rotate(45deg);   !*默认是暗转z轴旋转*!*/
            /*做变形动画，需要设置初始值，否则会出现bug*/
            transform: perspective(800px) rotate(0deg);     /*perspective(800px)：为设置透视举例，经验值为800px*/
            transition: all 1s ease;
        }
        .box:hover{
            transform: perspective(800px) rotateY(45deg);
        }

    </style>
</head>
<body>
        <div class="box"></div>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

实现绕X轴旋转，并设置透视距离

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>50_2_transform设置三维旋转_沿x轴旋转</title>

    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            border: 2px solid black;
            background-color: cyan;
            margin: 50px auto 0;

            /*设置三维动画旋转--绕x轴旋转*/
            transform: perspective(800px) rotateX(0deg);
            transition: all 1s ease;
        }
        .box:hover{
            transform: perspective(800px) rotateX(45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

显示效果如下：在这里插入图片描述

3D旋转–实现左右开门效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>50_3_transform设置三维旋转_旋转开门效果</title>
    <style type="text/css">

        .con{
            width:600px ;
            height: 300px;
            background-color: pink;
            margin: 50px auto 0;
        }
        .box1,.box2{
            width: 296px;
            height: 296px;
            border: 2px solid black;
            background-color:gold;
            float: left;
        }
        /*设置原始状态*/
        .box1{
            transform: perspective(800px) rotateY(0deg);
            transition: all 1s ease;
        }
        /*设置原始状态*/
        .box2{
            transform: perspective(800px) rotateY(0deg);
            transition: all 1s ease;
        }
        
        .con:hover .box1{
            transform: perspective(800px) rotateY(70deg);

        }
        .con:hover .box2{
            transform: perspective(800px) rotateY(-70deg);
        }

    </style>
</head>
<body>
    <div class="con">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

显示效果如下：
在这里插入图片描述

4、transform实现翻页动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现翻页效果</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 272px;
            /*background-color: gold;*/
            border: 3px solid black;
            margin: 50px auto 0;
            position: relative;
            transform-style: preserve-3d;       /*设置3D旋转效果*/
        }

        .box img{
            position: absolute;
            left: 50%;
            top: 0;
            margin: 0 -150px 0;
            transform: perspective(800px) rotateY(0deg);
            transition: all 500ms ease;
            backface-visibility: hidden;/*设置旋转后，背景不可见*/
        }
        .box:hover img{
            transform: perspective(800px) rotateY(180deg);
        }

        .box .back{
            width: 300px;
            height: 270px;
            background-color: pink;
            position: absolute;
            left: 50%;
            top: 0;
            margin: 0 -150px 0;
            font-size: 20px;
            text-align: center;
            line-height: 272px;

            transform: rotateY(-180deg);
            transition: all 500ms ease;
            backface-visibility: hidden;
        }

        .box:hover .back{
            transform:perspective(800px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/location_bg.jpg" alt="背景图">
        <div class="back">
            图片的说明文字
        </div>
    </div>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

5、走路动画效果

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @keyframes walking {
            from{
                left: 0;
            }
            to{
                left: -960px;
            }

        }

        .box{
            width: 120px;
            height: 180px;
            border: 1px solid black;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        .box img{
            position: absolute;
            left: 0;
            top: 0;

            /*设置动画*/
            animation: walking 1s steps(8) infinite normal;
        }
    </style>

</head>
<body>
    <div class="box">

        <img src="./images/walking.png" alt="">
    </div>
</body>
</html>

演示效果如下所示：
在这里插入图片描述

郭庆汝
关注
  • 3
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中的transform属性,css3的transform属性详解
weixin_33217202的博客
06-04 9152
transform变形属性(主要讨论2D)css 3的transform属性可以修改css中可视化模型的坐标空间，元素通过transform属性进行移动(translate)、旋转(rotate)、缩放(scale)以及倾斜(skew)注意：规范中有规定——如果元素的transform值不为none，则该元素会生成包含块的创建和层叠上下文包含块的创建和层叠上下文会影响子元素的一些属性(这里我只是简...
HTML（二）transform属性
qq_38763173的博客
02-06 5146
transform属性一、translate属性与其他属性组合导致的特殊问题scale与translate组合rotate与translate组合skew与translate组合二、其他属性transform-origin 变换基点transform-stylebackface-visibilityperspective transform 有四个属性： 位移：translate(x,y)、t...
html高级篇
最新发布
qq_48257021的博客
07-04 1185
translform:translateZ（100px）：仅仅是在z轴上移动（注意：translateZ一般用px单位）transform:translate3d（x，y，）：其中x、y、z分别指要移动的轴的方向的距离。translform:translateX（100px）：仅仅是在x轴上移动。translform:translateY（100px）：仅仅是在Y轴上移动。·z轴：垂直屏幕注意：往外面是正值，往里面是负值。·x轴：水平向右注意：X右边是正值，左边是负值。
Transform【变形】属性
精彩人生
02-11 6123
来源：http://www.w3cplus.com/content/css3-transform 今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。 Transform字面上就是变形，改变的意思。在CSS3中tr
HTML 变形(transform)、转换(transition)和动画(animation)
热门推荐
咖啡味的小认真
08-18 1万+
一、变形 Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 transform: rotate | scale | skew | translate |matrix; 我们同时对一个元素进行transform的多种属性操作，例如rotate、scale...
在css3中的transform的用法
3木子熙H
04-09 1135
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理 一.旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale 用法：transform: scale(0.5) 或者 transform:...
html transform优化,HTML Style transform用法及代码示例
weixin_39859128的博客
06-03 723
HTML DOM中的样式转换属性用于转换对象。 transform属性允许旋转，缩放，移动，倾斜元素等。它可以使用2D或3D转换。用法:它返回transform属性。object.style.transform它用于设置transform属性。object.style.transform = "none|transform-functions|initial|inherit"属性值：值描述none...
css3的transform造成z-index无效解决方案
09-25
此外，还可以尝试其他方法来达到类似的效果，比如使用绝对定位或者调整元素的顺序，甚至可以考虑使用CSS Grid或Flexbox布局来替代`transform`。在某些情况下，如果`transform`是必须的，也可以考虑将`transform`应用...
CSS3中Transform动画属性用法详解
09-27
CSS3（层叠样式表第三版）的Transform属性是用于元素进行2D或3D转换的一种工具，它包括了一系列可以操作元素位置、大小和形状的函数。这些转换可以用于创建简单的动画效果，增加用户界面的交互性和视觉吸引力。...
css3-animation-menu_HTML5_CSS3源码_
09-30
可能使用`transform`属性中的`rotateX`、`rotateY`、`translateZ`等方法来实现菜单的立体翻转或滑出效果。 5. **Flexbox布局**：虽然没有直接提及，但为了创建灵活的多级菜单，开发者可能会用到Flexbox布局模型。这...
CSS3中Animation动画属性用法详解
09-24
本文将深入讲解CSS3中的Animation属性及其用法。 首先，我们来了解一下`@keyframes`规则，这是创建动画的基础。`@keyframes`规则用于定义动画的各个阶段，即关键帧。它的语法结构是`@keyframes 动画名称 { ... }`。...
实例讲解CSS3中Transform的perspective属性的用法
09-24
在这篇文章中，我们将详细讲解CSS3 Transform属性中的perspective属性及其用法，以及perspective-origin属性，这些属性都是在实现3D变换效果时不可或缺的。 首先，perspective属性是用来定义观察者与z=0平面的距离...
CSS3_transform用法
wutrg1502的博客
06-27 443
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .text-list{ width: 500px; height: 4
transform.html
feiyangmystyle的博客
01-26 446
&lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;title&gt;&lt;/title&gt;   &lt;style type="text/css"&gt;    .box-wrap{     /*视角在父元素上设置  近大远小*/
html中的transform属性,CSS3中transform属性
weixin_32322859的博客
06-04 3423
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？一.Transform描述：ransform是变形,改变的意思。在CSS3中transform主要包括以下几种：旋转rotate，扭曲skew,缩放scale和移动translate以及矩阵变形matrix。transform的作用也是改变，让元素倾斜，旋转，缩放，位移。二.Transform语法：transform: ...
CSS3 transform.html
Missingmusic的博客
08-09 297
html> html> head lang="en"> meta charset="UTF-8"> title>title> style type="text/css"> body, div { margin:0; padding:0; } div { w
html中的旋转变化,CSS3 - 变换（Transform）的使用，以及变换的过渡
weixin_32876681的博客
06-10 957
1，变换函数translateX(x)：在水平方向移动元素，正值向右移动。translateY(y)：在垂直方向移动元素，正值向下移动。translate(x,y)：在水平和垂直方向移动元素。scaleX(x)：在水平方向缩放元素(1.0是原始大小)。使用负值会将元素绕y轴翻转，创建一个从右到左的镜像。scaleY(y)：在垂直方向缩放元素(1.0是原始大小)。使用负值会将元素绕x轴翻转，创建一个...
HTML代码transform,HTML canvas transform()用法及代码示例
weixin_39874881的博客
06-09 315
transform()方法用于替换当前变换矩阵，即画布上的每个对象都有一个当前变换矩阵。 transform()方法用于将该电流转换矩阵与以下描述的矩阵相乘：a c eb d f0 0 1它仅允许缩放，移动，倾斜和旋转当前上下文。用法:context.transform(a, b, c, d, e, f);参数值：a表示水平缩放b表示水平偏斜c表示垂直偏斜d表示...
HTML中transform菜鸟,Css3中transform属性的使用教程
weixin_32052253的博客
06-21 1589
这次我们来说一下transform属性，它是最重量CSS3改变形状特性的属性，可以让元素在2D和3D之前来回变化。1、2D变形deg表示degree(度数)，单位不能少，只有deg单位，没有别的单位。rotate(angle) 在参数中规定角度skew(x-angle,y-angle) 沿着 X 和 Y 轴的 2D 倾斜转换。skewX(angle) 沿着 X 轴的 2D 倾斜转换。skewY(a...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值