css转换（变形）

最新推荐文章于 2024-04-22 20:04:35 发布

王博玉-

最新推荐文章于 2024-04-22 20:04:35 发布

阅读量285

点赞数 2

分类专栏： web 代码文章标签： css 转换变形

本文链接：https://blog.csdn.net/wangboyujiayou/article/details/102960803

版权

web 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

代码

2 篇文章 0 订阅

订阅专栏

	1、什么是转换
		改变元素在页面中的大小，位置，角度和形状的一种方式

2、转换分类
1、2D转换
使元素在x轴和y轴上发生变化效果
2、3D转换
在2D转换基础上，增加 z轴的变化效果
3、转换属性
属性：transform
取值：
1、none
默认值，不进行任何转换
2、转换函数
表示一个或者多个转换函数，如果是多个函数的话，中间以空格分开
4、转换原点
属性：transform-origin
默认情况下，原点是在整个元素的中心位置处
取值：数值/百分比/关键字
两个值：表示 x轴和 y轴的位置
三个值：表示 x轴，y轴，z轴的位置
2、2D转换
1、2D位移
1、属性和函数
属性:transform
函数:
translate(x) :元素在x轴上的位移距离，取值为正，向右移动，取值为负，向左移动
translate(x,y) :
x表示x轴位移距离
y表示y轴位移距离，取值为正，向下移动，取值为负，向上移动
translateX(x) :只改变元素在x轴上的位置
translateY(y) :只改变元素在y轴上的位置
取值：
1、数值
2、百分比
2、2D缩放
1、作用
改变元素在页面中的大小
2、属性和函数
属性：transform
函数：
scale(value),如果只给一个值，那么x轴和y轴将等比缩放
scale(x,y):改变 x轴和y轴的缩放比例
scaleX(x):只改变x轴的缩放比例
scaleY(y):只改变y轴的缩放比例
取值：
默认值为1
缩小：0~1 之间的数值
放大：大于1的数值
3、2D旋转
1、作用
改变元素在页面中的角度
2、属性和函数
属性：transform
函数：rotate(ndeg)
n取值为正，则顺时针旋转
n取值为负，则逆时针旋转
3、注意
1、转换时，坐标轴会一起进行转换
2、转换原点可以影响转换效果
4、2D倾斜
1、作用
改变元素在页面上的形状
2、属性和函数
属性：transform
函数：
skew(xdeg) : x轴倾斜指定角度
实际上时改变 y轴的倾斜角度
取值为正：逆时针
取值为负：顺时针
skewX(xdeg) : 效果同上
skewY(ydeg) : y轴倾斜指定角度
实际上是改变 x轴的倾斜角度
取值为正：顺时针
取值为负：逆时针
===================

有没有了解了呢？
来做个小练习吧

使用2D制作一个正方体，然后设计它在光标经过时沿y轴旋转
在这里插入图片描述
下面是代码哦

<!DOCTYPE html><html><head>
<meta charset="utf-8"> 
<style type="text/css">

@-webkit-keyframes spin{
    0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
    100%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@-moz-keyframes spin{
    0%{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}
    100%{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@-ms-keyframes spin{        

    0%{-ms-transform:rotateY(0deg);transform:rotateY(0deg)}
    100%{-ms-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@-o-keyframes spin{     

    0%{-o-transform:rotateY(0deg);transform:rotateY(0deg)}
    100%{-o-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@keyframes spin{
    0%{transform:rotateY(0deg)}
    100%{transform:rotateY(360deg)}
}
.stage {
    width: 300px;
    height: 300px;
    float: left;
    margin: 15px;
    position: relative;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
}
.container {
    position: relative;
    height: 230px;
    width: 100px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -50px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.container:hover{
    -moz-animation:spin 5s linear infinite;
    -o-animation:spin 5s linear infinite;
    -webkit-animation:spin 5s linear infinite;
    animation:spin 5s linear infinite;
}
.side {
    font-size: 20px;
    font-weight: bold;
    height: 100px;
    line-height: 100px;
    color: #fff;
    position: absolute;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    text-transform: uppercase;
    width: 100px;
}
.top {
    background: red;
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
    -ms-transform: rotate(-45deg) skew(15deg, 15deg);
    -o-transform: rotate(-45deg) skew(15deg, 15deg);
    transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
    background: blue;
    -webkit-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
    -moz-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
    -ms-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
    -o-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
    transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
}
.right {
    background: green;
    -webkit-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
    -ms-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
    -o-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
    transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
}


</style>
<title></title>
</head>

<body>
<div class="stage s1">
    <div class="container">
        <div class="side top">Top</div>
        <div class="side left">Left</div>
        <div class="side right">Right</div>
    </div>
</div>


 
</body></html>