CSS3 2D 3D 过度与动画

最新推荐文章于 2024-08-31 19:13:13 发布

ASIA_技术

最新推荐文章于 2024-08-31 19:13:13 发布

阅读量188

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_32018951/article/details/100707393

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

2D

使用transform属性，结合2D变换方法

下面代码是基本模板

div
{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
}

<body>
    <div class="contain">
        <div class="test">我是新的位置</div>
        <div class="test2">我是老的的位置</div>
    </div>
</body>

body {
    padding: 10px;
}

.contain {
    border: 1px solid;
    height: 500px;
    padding: 50px;
    position: relative;
}
.test{
    width: 300px;
    line-height: 300px;
    background-color: crimson;
    text-align: center;
    transform: translate(220px,50px);
}
.test2{
    width: 300px;
    line-height: 300px;
    text-align: center;
    background: yellow;
    position: absolute;
    top: 50px;
    z-index: -1;
}

转换方法：

transform: translate(220px,50px);

translate(x,y) 偏移距离基于左上角，x轴，y轴，因为是基于点的位置，也可以认为原点是元素中心

transform: rotate(60deg);

rotate()以元素中心旋转，正数顺时针旋转

transform: scale(0.5,0.5);

scale(x,y) 中心位置不变，宽高变为对应的倍数

transform: skew(30deg,30deg);

scale(x,y),以中心位置建立直角坐标系，倾斜角度，分别是宽和高与x轴和y轴的角度

x角度表示高与x轴的角度，y角度表示宽与y轴的角度

transform-origin:50% 50%;

以元素原始位置的左上角为基准点，改变2D转换的基准位置，50%恰好是元素的中心位置

3D

transform: rotateX(45deg);

围绕x轴旋转角度

其他变换参考这个标准来就行

transform-style: flat|preserve-3d

值	描述
flat	表示所有子元素在2D平面呈现。
preserve-3d	表示所有子元素在3D空间中呈现。

过度

transition: width 2s

transition: all 2s;过度效果必须有类是hover这样得事件去定义元素终态

动画

@keyframes mymove //定义动画效果
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

div
{
    animation:mymove 5s infinite;//执行动画并定义不服动画属性
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}