CSS3现菱形效果代码

2018-7-22 16:33| 作者: admin| 查看: 1117| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它实现了视觉上的菱形效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body {background: #f1f1fa;}
.container{
  margin:140px auto 0;
  font-size:0;
  max-width:560px;
}
.wrap{
  transform: rotate(45deg) translate3d(0, 0, 0);
  display: inline-block;
  transition:transform 300ms ease-out;
  width:100px;
}
 
.crop{
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0;
  display: block;
  overflow: hidden;
  transform: skew(20deg, 20deg) translate3d(0, 0, 0);
  background-color: #1ABC9C;
}
</style>
<head>
</head>
<body>
<div class='container'>
  <div class='wrap'>
    <div class='crop'></div>
  </div>
  </div>
</div>
</body>
</html>

其实非常的简单,就是让元素进行3D运动一定的角度,在视觉上实现了菱形效果。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部