CSS动画特效三剑客之 transform(转换/变形)（css transform 动画）

25-03-10 11

对于CSS动画特效三剑客之transform(转换/变形)感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解csstransform动画，并且为您提供关于01.CSS动画-->transfor

对于CSS动画特效三剑客之 transform(转换/变形)感兴趣的读者，本文将提供您所需要的所有信息，我们将详细讲解css transform 动画，并且为您提供关于01.CSS动画-->transform、css transform 3D幻灯片特效、css transform 翻页动画记录、css 之变形（transform）的宝贵知识。

本文目录一览：

CSS动画特效三剑客之 transform(转换/变形)（css transform 动画）
01.CSS动画-->transform
css transform 3D幻灯片特效
css transform 翻页动画记录
css 之变形（transform）

CSS动画特效三剑客之 transform(转换/变形)（css transform 动画）

CSS动画特效三剑客之 transform(转换/变形)（css transform 动画）

transform可以实现元素的位移、旋转、变形、缩放。

缩放：scale
移动：translate
旋转：rotate
倾斜：skew

2D 转换之移动 translate

transform: translate(x,y);

定义 2D 转换，沿着 X 和 Y 轴移动元素
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform:rotate(angle)

角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

/* 设置旋转中心点*/
transform-origin: x y;

2D 转换之缩放scale

transform:scale(x,y);

transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小

注意：

只能转换由盒模型定位的元素。
同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，其顺序会影转换的效果。（先旋转会改变坐标轴方向）

总结

以上是小编为你收集整理的CSS动画特效三剑客之 transform(转换/变形)全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

原文地址：https://www.cnblogs.com/qingheshiguang/p/16327854.html

01.CSS动画-->transform

01.CSS动画-->transform

transform:　　

　　translate(参数1，参数2)；让元素在X轴与Y轴方向发生偏移-->参数1：X；参数2：Y

　　rotate(参数1)；让元素进行旋转；单位(deg)

　　scale(参数1，参数2)；让元素在X轴与Y轴放大或缩小多少倍-->参数1：X；参数2：Y

　　skew(参数1，参数2)；skew(30deg,20deg)-->围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度

transition:过渡效果

　　transition: all 1s linear 3s;

　　*过渡效果

SyntaxHighlighter html"> 效果

效果的持续时间

显示速度变化

效果的延迟时间*/

Highlighter sh-gutter">

301"https://www.jb51.cc/tag/Syntax/" target="_blank">SyntaxHighlighter html">

Meta

效果效果效果的持续时间显示速度变化效果的延迟时间*/

方法倍数参数2：Y轴方向的放大倍数变形效果

总结

以上是小编为你收集整理的transform">01.CSS动画-->transform全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

CSS相关文章

UE4 TCP协议连接服务器与客户端

UE4 TCPSocket连接服务器与客户端

pycharm安装pygame库遇到问题怎么办？

新手在pycharm安装其他第三方库时非常顺利，安装pygame库却遇到问题。安装失败时软件提示原因可能大都与version有关，可以试一下下面这个简单有效方法，希望有帮助。

Unity用代码写行走移动（第一人称）

利用代码写物体移动,首先我们要知道按键检测一般按键检测if (Input.GetKey(KeyCode.按键值))比如说我按W触发就是if (Input.GetKey(KeyCode.W)前进代码如下：

Unity场景优化工具：Mesh Baker 基础教程（贴图篇）

模型贴图整合是3D游戏中美术资源优化的重要环节，我们通常把多个模型的贴图集成到一张2048大小的贴图集中，以达到减少贴图和材质球的数量来节省资源。但是面对成百上千的模型，纹理贴图，法线贴图，高光贴图等等，每种贴图集合成大图，再分别对一次UV，结果是累死，各种贴图还未必对得上位置……，那使用MeshBaker我们可以批量自动拼合贴图并映射UV，大多数工作只需在Unity中来完成，免去在三维软件中手动调整UV的烦恼。......

Unity游戏开发：对话系统的实现

在解谜类游戏中，与npc的对话是一个基础且常用的功能。通常来说，在与npc的对话中玩家可以获取一些有价值的信息并对之后的游戏有一定的导向作用。此外，在玩家获取对应物品前后，与npc的对话内容也会发生相应改变。因此，我们需要将对话系统进行封装，以便于在不同的npc身上进行使用，同时要预留接口，后期可以增加或修改对话内容。这里我们以Cotton Puzzle为例，将对话系统拆分为数据、逻辑和UI三部分来实现。...

Unity技术手册-UGUI零基础详细教程-ScrollBar和ScrollView

有三个选项，Permanent（表示一直显示），Auto Hide（表示默认不显示当内容超过了高度就展示出滚动条，但可能造成滚动条和滑动内容重叠），Auto Hide And Expand ViewPort（表示默认不显示当内容超过了高度就展示出滚动条，并且会和滚动view有个边距，看起来很舒服）

Unity UI、图片(Sprite)的显示层级(遮挡关系)控制

UI、图片遮挡关系的控制

【Unity】Audio Source组件——用代码动态控制音效的播放、暂停

1.代码控制播放、暂停、停止2.如何检测音效播放完毕3.如何动态控制音效播放

css transform 3D幻灯片特效

css transform 3D幻灯片特效

js

[javascript]
$(function(){ 
    var length = $(".container a").length; 
    var $items = $(".container a"); 
 
    $items.on("transitionend", function(event){ 
        $items.removeClass("trans"); 
    }); 
 
    $(".container a").each(function(index, value){ 
        var $child = $(this); 
        if (index === 0) { 
            $child.addClass("current showing"); 
        } else if (index === 1) { 
            $child.addClass("left showing"); 
        } else if (index == 2) { 
            $child.addClass("out-left"); 
        } else if (index == (length - 2)) { 
            $child.addClass("out-right"); 
        } else if (index === (length - 1)) { 
            $child.addClass("right showing"); 
        } else { 
            $child.addClass("hiding"); 
        };

登录后复制

        $child.click(function(){ 
            var $item = $(this); 
            //next item   
            var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1); 
            //previous item  
            var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1); 
            var $rightItem; 
            if(index == 0){ 
                $rightItem = $items.eq(length - 2); 
            } else if (index == 1) { 
                $rightItem = $items.eq(length - 1); 
            } else { 
                $rightItem = $items.eq(index - 2); 
            } 
            var $leftItem; 
            if(index == length - 2){ 
                $leftItem = $items.eq(0); 
            } else if (index == length - 1) { 
                $leftItem = $items.eq(1); 
            } else { 
                $leftItem = $items.eq(index + 2); 
            }

登录后复制

            //current item click,return  
            if ($item.hasClass("current")) { 
                return false; 
            } else if ($item.hasClass("left")) { 
                //center move right  
                $preItem.attr("class","trans right showing"); 
                //left move center  
                $item.attr("class","trans current showing"); 
                //right item move out  
                $rightItem.attr("class","trans out-right"); 
                //next move left  
                $nextItem.attr("class","trans left showing"); 
                //left ready  
                $leftItem.attr("class","out-left"); 
            } else if ($item.hasClass("right")) { 
                //center move left  
                $nextItem.attr("class","trans left showing"); 
                //right move center  
                $item.attr("class","trans current showing"); 
                //left item clear  
                $leftItem.attr("class","trans out-left"); 
                //previous move right  
                $preItem.attr("class","trans right showing"); 
                //right ready  
                $rightItem.attr("class","out-right"); 
            }; 
        }); 
    }); 
});

登录后复制

$(function(){
 var length = $(".container a").length;
 var $items = $(".container a");

登录后复制

 $items.on("transitionend", function(event){
  $items.removeClass("trans");
 });

登录后复制

 $(".container a").each(function(index, value){
  var $child = $(this);
  if (index === 0) {
   $child.addClass("current showing");
  } else if (index === 1) {
   $child.addClass("left showing");
  } else if (index == 2) {
   $child.addClass("out-left");
  } else if (index == (length - 2)) {
   $child.addClass("out-right");
  } else if (index === (length - 1)) {
   $child.addClass("right showing");
  } else {
   $child.addClass("hiding");
  };

登录后复制

  $child.click(function(){
   var $item = $(this);
   //next item
   var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1);
   //previous item
   var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1);
   var $rightItem;
   if(index == 0){
    $rightItem = $items.eq(length - 2);
   } else if (index == 1) {
    $rightItem = $items.eq(length - 1);
   } else {
    $rightItem = $items.eq(index - 2);
   }
   var $leftItem;
   if(index == length - 2){
    $leftItem = $items.eq(0);
   } else if (index == length - 1) {
    $leftItem = $items.eq(1);
   } else {
    $leftItem = $items.eq(index + 2);
   }

登录后复制

   //current item click,return
   if ($item.hasClass("current")) {
    return false;
   } else if ($item.hasClass("left")) {
    //center move right
    $preItem.attr("class","trans right showing");
    //left move center
    $item.attr("class","trans current showing");
    //right item move out
    $rightItem.attr("class","trans out-right");
    //next move left
    $nextItem.attr("class","trans left showing");
    //left ready
    $leftItem.attr("class","out-left");
   } else if ($item.hasClass("right")) {
    //center move left
    $nextItem.attr("class","trans left showing");
    //right move center
    $item.attr("class","trans current showing");
    //left item clear
    $leftItem.attr("class","trans out-left");
    //previous move right
    $preItem.attr("class","trans right showing");
    //right ready
    $rightItem.attr("class","out-right");
   };
  });
 });
});

登录后复制

html
[html]
<html> 
<head> 
    <title>slideshow</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head> 
<body> 
    <div> 
        <div> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a> 
            <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></a> 
        </div> 
    </div> 
     
    <script type="text/javascript" src="jquery-1.8.3.js"></script> 
    <script type="text/javascript" src="slide.js"></script> 
</body> 
</html>

登录后复制

<html>
<head>
 <title>slideshow</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="http://www.php1.cn/"> </head>
<body>
 <div>
  <div>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225608.jpg" alt="1" /></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225808.jpg" alt="2" /></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225977.jpg" alt="3"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034225569.jpg" alt="4"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226120.jpg" alt="5"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226239.jpg" alt="6"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226255.jpg" alt="7"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226478.jpg" alt="8"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226691.jpg" alt="9"/></a>
   <a href="http://www.php1.cn/">http://up.2cto.com/2013/0327/20130327034226887.jpg" alt="10"/></a>
  </div>
 </div>
 
 <script type="text/javascript" src="jquery-1.8.3.js"></script>
 <script type="text/javascript" src="slide.js"></script>
</body>
</html>

登录后复制

css

[css]
body,div{margin: 0;padding: 0;} 
.container{width: 100%;height: 450px; position: relative;} 
.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;} 
.container a{display: block;position: absolute;left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;} 
.container a img{width: 480px;height: 300px;display: block;border: 0;} 
.container .current{z-index: 2;} 
.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;} 
.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;} 
.showing{opacity: 1;visibility: visible;} 
.hiding{opacity: 0;visibility: hidden;} 
.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;} 
.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;} 
.trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}

登录后复制

body,div{margin: 0;padding: 0;}
.container{width: 100%;height: 450px; position: relative;}
.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;}
.container a{display: block;position: absolute;left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;}
.container a img{width: 480px;height: 300px;display: block;border: 0;}
.container .current{z-index: 2;}
.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;}
.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;}
.showing{opacity: 1;visibility: visible;}
.hiding{opacity: 0;visibility: hidden;}
.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;}
.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;}
.trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}

登录后复制

demo
demo

立即学习“前端免费学习笔记（深入）”；

css transform 翻页动画记录

css transform 翻页动画记录

翻页问题场景
B和C是同一页（正反两面）

当想要翻页覆盖 A 时，B、C 需要同时翻页才能覆盖A，显示D。

B、C 不能写在同一个盒子里

错误例子：

<div></div>
<div>
  <div></div>
  <div></div>
</div>
<div></div>

正确例子：

<main>
  <div></div>
  
  <div></div>
  <div>
    <div>内容</div>
  </div>

  <div></div>
</main>

为什么不使用一个盒子包裹 B、C，使他们翻转就可以了？

答案在下面。

B 需要设置

.B{
  backface-visibility: hidden;
}

backface-visibility: hidden; 这个属性是让B的背面隐藏。

并且让 B、C 重叠，使用绝对定位进行重叠。

C 需要设置

.C > div{
  transform: rotateY(-180deg);
}

因为正常内容是显示正面的，我们需要把 C 的内容翻转到背面。让它看起来像是纸张的背面

回到上面的问题，为什么不使用一个盒子

因为包裹 B、C 的盒子进行翻转时，B 设置背面隐藏是无效的。只有让 B 进行翻转，才能让 B 的背面隐藏,显示背面的 C。

接着对B、C进行动画翻页。

main{
  perspective: 1800;
  transform-style: preserve-3d;
}

.B,.C{
  transition: transform 1s;
  
  &.On{
    transform: rotateY(180deg);
  }
}

css 之变形（transform）

css 之变形（transform）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3变形，阴影和渐变背景色属性</title>
</head>
<!--
变形【transform】
向元素应用2d或3d转换。该属性允许我们对元素进行旋转，缩放，移动或倾斜

transform参数：
rotate（角度值）：旋转
translate（x，y）：移动
scale（x，y）：缩放
skew（x，y）：扭曲
matrix（a,b,c,d,e,f）:矩阵

变形【transform】
改变元素基点 transform-origin:x y;
改变transform动作的基点（中心点）。


对象阴影【box-shadow】
语法：box-shadow:投影方式 x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色；
可以使用一个或多个投影，如果使用多个投影时必须用逗号，分开。
另外，还可以通过inset来设置对象的内阴影


背景颜色线性渐变【linear-gradient】
语法：
background:linear-gradient(起点，起点颜色，过度颜色【可选】，终点颜色)；
起点：top是从上到下，left是从左到右。如果定义成left top，那就是从左上角到右下角
过渡色：可以插入多个，表示多种颜色的渐变
 -->


<style>
    .transform{
        width: 1000px;
        background-color: #fdfdfd;
        margin:50px auto;
    }
    .transform:after{
        clear:both;
        content: '' '';
        display: block;
        overflow: hidden;
    }
    .transform > p{
        width: 230px;
        float: left;
        border:1px #999 solid;
        margin-right: 10px;
        text-align: center;
        padding-bottom: 10px;
    }
    .transform > p strong{
        display: block;
        background-color: #eee;
        font-size: 20px;
        line-height: 28px;
        font-family: "MicrosoftYaHei";
        color:#333;
        margin-bottom: 10px;
    }
    .transform > p  span{
        display: block;
        width: 100px;
        height: 100px;
        margin:0 auto;
        border:1px #ccc solid;
        background-color: #09f;
    }
    .transform.origin > p  span{
        background-color: #0c0;
        /* 改变基点 */
        transform-origin:0 -40px;
    }
    .transform > p .roate{
        transform:rotate(20deg);
    }
    .transform > p .translate{
        transform:translate(20px,20px);
    }
    .transform > p .scale{
        transform:scale(.5);
    }
    .transform > p .skew{
        transform:skew(20deg,-30deg);
    }
</style>
<body>
    <div class="transform">
        <p>
            <strong>旋转(roate)</strong>
            <span class="roate"></span>
        </p>

        <p>
            <strong>移动(translate)</strong>
            <span class="translate"></span>
        </p>

        <p>
            <strong>缩放(scale)</strong>
            <span class="scale"></span>
        </p>

        <p>
            <strong>扭曲（skew)</strong>
            <span class="skew"></span>
        </p>                        
    </div>

    <div class="transform origin">
        <p>
            <strong>旋转(roate)</strong>
            <span class="roate"></span>
        </p>

        <p>
            <strong>移动(translate)</strong>
            <span class="translate"></span>
        </p>

        <p>
            <strong>缩放(scale)</strong>
            <span class="scale"></span>
        </p>

        <p>
            <strong>扭曲（skew)</strong>
            <span class="skew"></span>
        </p>                        
    </div>
</body>
</html>

关于CSS动画特效三剑客之 transform(转换/变形)和css transform 动画的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于01.CSS动画-->transform、css transform 3D幻灯片特效、css transform 翻页动画记录、css 之变形（transform）等相关知识的信息别忘了在本站进行查找喔。

本文标签：

上一篇CSS display（展示）属性（css display显示）

下一篇CSS 子节点继承父节点(祖先节点)的样式（子节点和父节点）