css32d旋转教学

CSS3 2D 旋转教学 CSS3 中提供了非常方便的旋转转换功能，我们可以通过这个功能来实现元素的旋转、翻转等效果。下面就为大家介绍一下 2D 旋转的实现方法。一、基本语法 CSS 2D 旋转属性共有两个，分别为： transform:rotate(angle); /* 逆时针旋转 */ transform:rotateX(angle); /* 沿 X 轴翻转 */ transform:rotateY(angle); /* 沿 Y 轴翻转 */ 其中，angle 为旋转的角度，可以用度数（deg）、弧度（rad）等表达。二、旋转中心点控制默认情况下，旋转的中心点是元素的中心点。如果需要修改旋转中心点，可以使用 transform-origin 属性。 transform-origin 属性接受两个参数，分别为 X 和 Y 坐标。可以使用百分比、px 等单位。例如： transform-origin:0% 0%; /* 从左上角开始旋转 */ transform-origin:100% 100%; /* 从右下角开始旋转 */ transform-origin:50% 50%; /* 默认情况下 */ 三、综合应用下面我们来看一下如何使用旋转、翻转和中心点控制来实现一些常见的效果。 1. 放置一个背景图案，以 45 度角倾斜。 HTML 代码：

<div class="pattern">
</div>

CSS 代码：

css32d旋转教学

.pattern {
    width:100px;
    height:100px;
    background-image:url(pattern.png);
    transform:rotate(45deg);
    transform-origin: top left;
}

2. 创建一个翻转卡片。 HTML 代码：

<div class="card">
    <div class="front">
        <p>正面</p>
    </div>
    <div class="back">
        <p>背面</p>
    </div>
</div>

CSS 代码：

.card {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
}
.card .front,.card .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.card .front {
    background-color: #EDEDED;
    transform: rotateY(0deg);
}
.card .back {
    background-color: #F06D37;
    transform: rotateY(180deg);
}
.card:hover .front {
    transform: rotateY(-180deg);
}
.card:hover .back {
    transform: rotateY(0deg);
}

以上就是 2D 旋转的基本教学内容。通过学习关于中心点控制和 transform-style 属性的知识，我们可以在旋转和翻转中实现更丰富的效果。

相关推荐