css3 transform的旋转和位移制作太阳花

作者：System 时间：2024年08月17日分类：所有,css3 字数：807

这篇文章距离上次修改已过230天，其中的内容可能已经有所变动。

要使用CSS3的transform属性来制作一个太阳花，你需要进行两个步骤：旋转和位移。以下是一个简单的例子：

HTML:

<div class="sunflower">
  <div class="petals"></div>
</div>

CSS:

.sunflower {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(45deg);
}

.petals {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  border-radius: 100px 100px 0 0;
  transform-origin: 50% -50%;
}

.petals:before, .petals:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: inherit;
  border-radius: 100px 100px 0 0;
}

.petals:before {
  transform: rotate(-45deg);
}

.petals:after {
  transform: rotate(45deg);
}

这段代码创建了一个基本的太阳花，它有两个花瓣，通过旋转.petals类来实现，并通过:before和:after伪元素来创建两个额外的花瓣。这些花瓣是由.petals的父元素.sunflower旋转得到的。

css3 transform的旋转和位移制作太阳花

评论已关闭

推荐阅读