关于inline类型

原创已于 2022-02-21 23:08:39 修改 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #3d

于 2022-02-21 23:06:24 首次发布

本文探讨了如何利用CSS3的`transform`属性实现元素的3D变换，重点讲解了`float:left`与`display:inline`的区别，并展示了`rotateX`, `rotateY`, `rotateZ`在`hover`状态下的实际效果。

.box {
    width: 180px;
    height: 180px;

    float: left;
    /* display: inline; */
    transition: 1s linear;
    transform-style: preserve-3d;

}

#stage {
    width: 560px;
    height: 100px;
    perspective: 300px;
}

#boxx:hover {
    transform: rotateX(60deg);
}

#boxy:hover {
    transform: rotateY(60deg);
}

#boxz:hover {
    transform: rotateZ(60deg);
}

将标签类型转换为inline会导致元素无法正常进行变换，建议使用float：left进行排版