css3旋转

transform

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等

2d移动

transform:定义变换
translate(x,y);位移
两个值：水平垂直方向位移
一个值：水平(x)
translateX( )
translateY( )

<style>
.wrap {
     float: left;
     width: 500px;
     height: 300px;
     border: 1px solid;
}
.box {
     width: 100px;
     height: 100px;
     background: red;
     transition: 0.5s;
}
.wrap:nth-child(1):hover .box {
     transform: translate(200px, 100px);
}
.wrap:nth-child(2):hover .box {
     transform: translate(200px);
}
.wrap:nth-child(3):hover .box {
      transform: translateX(200px);
}
.wrap:nth-child(4):hover .box {
      transform: translateY(200px);
}
</style>
<body>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
</body>

角度旋转

rotate()
角度 deg
正值：顺时针旋转
负值：逆时针旋转

<style>
.wrap {
    loat: left;
    width: 500px;
    height: 300px;
    border: 1px solid;
}
.box {
    width: 100px;
    height: 100px;
    background: red;
    transition: 0.5s;
}

.wrap:nth-child(1):hover .box {
    transform: rotate(30deg);
}
.wrap:nth-child(2):hover .box {
    transform: rotate(-30deg);
}
</style>
<body>
<div class="wrap">
    <div class="box">box</div>
</div>
<div class="wrap">
    <div class="box">box</div>
</div>
</body>

2d缩放

scale(x,y) 定义2d缩放
参数：缩放比率大于1 放大 0-1之间缩小
两个值：水平垂直方向缩放
一个值： x,y轴方向同时缩放
scaleX( )
scaleY( )

<style>
.wrap {
     position: relative;
     float: left;
     width: 500px;
     height: 300px;
     order: 1px solid;
}
.box {
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -50px 0 0 -50px;
     width: 100px;
     height: 100px;
     background: red;
     transition: 0.5s;
}
.wrap:nth-child(1):hover .box {
     transform: scale(2, 3);
}
.wrap:nth-child(2):hover .box {
     transform: scale(2);
}
.wrap:nth-child(3):hover .box {
     transform: scaleX(2);
}
.wrap:nth-child(4):hover .box {
     transform: scaleY(0.5);
}
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>

2d倾斜

skew(x,y) 定义2d倾斜
两个值：水平和垂直方向倾斜
一个值：水平(x)
skewX( )
skewY( )

<style>
.wrap {
     position: relative;
     float: left;
     width: 500px;
     height: 300px;
     order: 1px solid;
}
.box {
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -50px 0 0 -50px;
     width: 100px;
     height: 100px;
     background: red;
     transition: 0.5s;
}
.wrap:nth-child(1):hover .box {
     transform: skew(30deg, 20deg);
}
.wrap:nth-child(2):hover .box {
     transform: skew(30deg);
}
.wrap:nth-child(3):hover .box {
     transform: skewX(30deg);
}
.wrap:nth-child(4):hover .box {
     transform: skewY(20deg);
}
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>

3D转换

transform-origin 2d或者3D转换元素
transform-origin: x-axis y-axis z-axis;
x-axis 定义视图被置于 X 轴的何处（left，center，right，length，%）
y-axis 定义视图被置于 Y 轴的何处（left，center，right，length，%）
z-axis 定义视图被置于 Z 轴的何处（left，center，right，length，%）

<style>
.wrap {
     position: relative;
     float: left;
     width: 500px;
     height: 300px;
     order: 1px solid;
}
.box {
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -50px 0 0 -50px;
     width: 100px;
     height: 100px;
     background: red;
     transition: 0.5s;
}
.wrap:nth-child(1):hover .box {
     transform-origin: left top;
     transform: scale(1.5);
}
.wrap:nth-child(2):hover .box {
     transform-origin: left bottom;
     transform: scale(1.5);
}
.wrap:nth-child(3):hover .box {
     transform-origin: right bottom;
     transform: scale(1.5);
}
.wrap:nth-child(4):hover .box {
     transform-origin: center;
     transform: scale(1.5);
}
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>
<div class="wrap">
    <div class="box"></div>
</div>

transform-style

规定如何在 3D 空间中呈现被嵌套的元素
transform-style: flat|preserve-3d
flat 子元素将不保留其 3D 位置
preserve-3d 子元素将保留其 3D 位置

<style>
.wrap {
     position: relative;
     margin: 100px auto;
     width: 400px;
     height: 300px;
     background: red;
     transform: rotateY(85deg); #沿着y轴旋转
     transform-style: preserve-3d;#显示为3d状态
}

.box {
     font-size: 28px;
     width: 150px;
     height: 200px;
     background: green;
     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -50px;
     margin-top: -100px;
     transform: rotateX(30deg);#沿着x轴旋转
}
</style>
<div class="wrap">
    <div class="box">111111</div>
</div>

视距

perspective: 视距让3D变换的子元素拥有透视效果(近大远小)
加给父元素
只对3d变换的元素有效
值越小透视效果越明显
无穷大时接近于none
通常:500px-800px
translateZ() 沿z轴平移
正值：向前（越近）
负值：向后（越远）

<style>
.wrap {
    float: left;
    width: 200px;
    height: 300px;
    border: 1px solid red;
    margin: 100px 0 0 100px;
    perspective:800px;
}
.wrap img {
    transition: 0.5s;
}
.wrap:nth-child(1):hover img {
    transform: translateZ(100px);
}
.wrap:nth-child(2):hover img {
    transform: translateZ(-200px);
}
</style>
<div class="wrap">
    <img src="xxx.jpg"/>
</div>
<div class="wrap">
    <img src="xxx.jpg"/>
</div>
</body>

3d旋转

rotateX 沿x轴平移正值：向前（越近）负值：向后（越远）
rotateY 沿y轴旋转正值：向上负值：向下
rotateZ 沿z轴旋转正值：向右负值：向左

<style>
.wrap{ 
   float: left;
   width:200px;
   height:300px;
   border:1px solid red;
   margin:100px 0 0 100px; 
   perspective:500px;
}
.wrap img{transition:0.5s;}
.wrap:nth-child(1):hover img{transform:rotateX(30deg);}
.wrap:nth-child(2):hover img{transform:rotateX(-30deg);}
.wrap:nth-child(3):hover img{transform:rotateY(30deg);}
.wrap:nth-child(4):hover img{transform:rotateY(-30deg);}
.wrap:nth-child(5):hover img{transform:rotateZ(30deg);}
.wrap:nth-child(6):hover img{transform:rotateZ(-30deg);}
</style>
<div class="wrap">
    <img src="xxx.jpg"/>
</div>
<div class="wrap">
    <img src="xxx.jpg"/>
</div>
<div class="wrap">
    <img src="xxx.jpg"/>
</div>
<div class="wrap">
    <img src="xxx.jpg"/>
</div>
<div class="wrap">
    <img src="xxx.jpg"/>
</div>
</body>

3d缩放

rotateZ 沿z轴旋转
scaleZ 沿z轴缩放


<style>
.wrap{ 
   float: left;
   width:200px;
   height:300px;
   border:1px solid red;
   margin:100px 0 0 100px; 
   perspective:500px;
}
.wrap img{transition:0.5s;}
.wrap:nth-child(1):hover img{transform:rotateY(40deg)scaleZ(2);}
.wrap:nth-child(2):hover img{transform:rotateX(40deg) scaleZ(0.5);}
</style>
<div class="wrap">
    <img src="xxx.jpg"/>
</div>
<div class="wrap">
    <img src="xxx.jpg"/>
</div>
</body>

posted @ 2020-10-20 15:11 qqaazzhf 阅读(293) 评论(0) 收藏举报

刷新页面返回顶部

qqaazzhf