CSS3 transform变换

发布时间：2020-04-03 16:43:36 作者：bigbeatwu
来源：网络阅读：371

1.transform变换

（1）translate（x,y）设置盒子位移
（2）scale（x,y）设置盒子缩放
（3）rotate（deg）设置盒子旋转
（4）skew（x-angle,y-angle）设置盒子斜切
（5）perspective设置透视距离
（6）transform-style flat | preserve-3d 设置盒子是否按3d空间显示
（7）translateX,translateY,translateZ 设置三维移动
（8）rotateX,rotateY,rotateX 设置三维旋转
（9）scaleX，scaleY，scaleZ，设置三维缩放
（10）transform-origin 设置变形的中心点
（11）backface-visibility 设置盒子背面是否可见

.box{
    width: 600px;
    height: 250px;
    border: 1px solid #000;
    margin: 50px auto;
    position: relative;
    transform-style: preserve-3d;
}
.box img{
    position: absolute;
    left: 300px;
    top: 0px;
    transform: perspective(800px) rotateY(0deg);
    transition: all 500ms ease;
    backface-visibility: hidden;
}
.box:hover img{
    transform: perspective(800px) rotateY(180deg);
}
.box .back{
    width: 224px;
    height: 224px;
    background-color: yellow;
    position: absolute;
    left: 300px;
    text-align: center;
    line-height: 240px;
    transform: perspective(800px) 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="/image/路飞1.jpg" alt="路飞">
    <div class="back">路飞6666</div>
</div>

</body>

CSS3 transform变换

例子二：旋转

.box1,.box2,.box3,.box4,.box5{
    width: 100px;
    height: 100px;
    margin: 30px;
    background-color: aquamarine;
    float: left;
    transition: all 250ms ease;  /*过渡*/
}
.box1:hover{
    transform: rotate(45deg);    /*一中心为原点旋转*/
}
.box2:hover{
    transform: rotate(45deg);
    transform-origin: left center;  /*调整中心点*/
}
.box3:hover{
    transform: rotate(45deg);
    transform-origin: right center;
}
.box4:hover{
    transform: rotate(45deg);
    transform-origin: top center;
}
.box5:hover{
    transform: rotate(45deg);
    transform-origin: 50px 50px;    /*块为坐标*/
}
</style>

</head>

<body>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>

</body>

CSS3 transform变换

CSS3 transform变换

相关阅读