文章/答案/技术大牛

发布

社区首页 >问答首页 >每个元素的CSS透视图

问每个元素的CSS透视图
EN

Stack Overflow用户

提问于 2017-02-15 10:26:52

回答 2查看 792关注 0票数 1

我使用的卡列表，可以翻转点击显示更多的信息。我想增加一些视角，使它看起来很好。

我的问题是，为了给列表提供一些透视图，我需要将透视图附加到ul元素。然后由父元素的大小来定义原点，这使得中间的元素没有透视，而顶部和底部的元素则以非常丑陋的方式转换。

有没有办法让每个元素--它自己的视角--有一个平滑的3D外观，最好没有JavaScript？

ul {
  perspective: 600px;
}
li {
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: lightgrey;
  transition: all .3s ease;
}
li:hover {
  transform: rotateY(180deg);
}

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>

</body>

css

flip

perspective

回答 2

Stack Overflow用户

发布于 2017-02-15 10:32:58

试试这个

ul {
  perspective: 600px;
}
li {
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: lightgrey;
  transition: all 2s ease-out;
}
li:hover {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

票数 0

Stack Overflow用户

发布于 2017-02-15 10:35:47

我的想法是在每个<span>中设置内部容器，即li，并使li保持静态，转换内部元素：

ul {
  -webkit-perspective: 600px;
  perspective: 600px;
}
li {
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 5px;
}
li span {
  display: block;
  height: 100%;
  background-color: lightgrey;
  transition: all .3s ease;
}
li:hover span {
  transform: rotateY(180deg);
}

<body>
	<ul>
		<li><span>1</span></li>
		<li><span>2</span></li>
		<li><span>3</span></li>
		<li><span>4</span></li>
		<li><span>5</span></li>
		<li><span>6</span></li>
		<li><span>7</span></li>
	</ul>

</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42246691

复制

相似问题

问每个元素的CSS透视图
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问每个元素的CSS透视图EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问每个元素的CSS透视图
EN