溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS3 transform變換

發(fā)布時(shí)間：2020-04-03 16:43:36 來源：網(wǎng)絡(luò) 閱讀：367 作者：bigbeatwu 欄目：web開發(fā)

1.transform變換

（1）translate（x,y）設(shè)置盒子位移
（2）scale（x,y）設(shè)置盒子縮放
（3）rotate（deg）設(shè)置盒子旋轉(zhuǎn)
（4）skew（x-angle,y-angle）設(shè)置盒子斜切
（5）perspective設(shè)置透視距離
（6）transform-style flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
（7）translateX,translateY,translateZ 設(shè)置三維移動(dòng)
（8）rotateX,rotateY,rotateX 設(shè)置三維旋轉(zhuǎn)
（9）scaleX，scaleY，scaleZ，設(shè)置三維縮放
（10）transform-origin 設(shè)置變形的中心點(diǎn)
（11）backface-visibility 設(shè)置盒子背面是否可見

<head>
<meta charset="utf-8">
<title>翻頁動(dòng)漫</title>
<style type="text/css">

.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;      /*緩沖運(yùn)動(dòng)*/
    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變換

CSS3 transform變換

例子二：旋轉(zhuǎn)

<head>
<meta charset="utf-8">
<title>旋轉(zhuǎn)</title>
<style type="text/css">

.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);    /*一中心為原點(diǎn)旋轉(zhuǎn)*/
}
.box2:hover{
    transform: rotate(45deg);
    transform-origin: left center;  /*調(diào)整中心點(diǎn)*/
}
.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;    /*塊為坐標(biāo)*/
}
</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變換

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手