今天在学习一些css3的属性，其中比较有意思的就是transform和backface-visibility。
transform属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。我相信大家对translate和rotate以及scale是比较熟悉的。它们分别实现平移，旋转和缩放功能。但是今天我们用到的是skew属性，它可以实现倾斜转换。backface-visibility属性定义当元素不面向屏幕时是否可见。在旋转元素不希望看到其背面时，该属性很有用。比如我们第一个小实例就会用到它。
先给大家看看实例截图，代码在文末。如有错误的地方，欢迎大家指正，让我们一起进步吧！
附上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
body {
padding: 5%;
}
/* 1.CSS实现卡片3D翻转效果 */
.box {
position: relative;
display: block;
width: 200px;
height: 200px;
overflow: hidden;
}
.box div {
display: block;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
transition: all 1s;
cursor: pointer;
/* backface-visibility 属性定义当元素不面向屏幕时是否可见。 */
backface-visibility: hidden;
}
.box1 {
background-color: aqua;
}
.box2 {
background-color: tomato;
transform: rotateY(-180deg);
}
/* 2.CSS实现平行四边形 */
.parallelogram {
display: block;
width: 100px;
height: 100px;
background-color: yellow;
transform: skewX(-45deg);
}
/* 3.css实现♥️桃心♥️*/
.heart {
display: block;
width: 100px;
height: 100px;
position: relative;
}
.heart::before {
position: absolute;
left: 10px;
content: "";
background-color: red;
width: 50%;
height: 100%;
border-radius: 50%;
transform: rotate(-25deg);
}
.heart::after {
position: absolute;
right: 10px;
content: "";
background-color: red;
width: 50%;
height: 100%;
border-radius: 50%;
transform: rotate(25deg);
}
/* 4.css实现斑马线 */
/* 一个倾斜45度的重复线性渐变,
从蓝色开始渐变到红色 eg:repeating-linear-gradient(45deg, blue, red); */
/* 一个从右下角到左上角的重复线性渐变,
从蓝色开始渐变到红色 eg:repeating-linear-gradient(to left top, blue, red); */
/* 一个由下至上的重复线性渐变,
从蓝色开始，40%后变绿，
最后渐变到红色 eg:repeating-linear-gradient(0deg, blue, green 40%, red);
*/
.zebra {
display: block;
width: 400px;
height: 200px;
background: repeating-linear-gradient(
-45deg,
yellow,
yellow 25px,
black 25px,
black 50px
);
}
/* 5.css实现五角星⭐️*/
.lollipop {
position: relative;
width: 150px;
height: 150px;
overflow: hidden;
}
.triangle {
position: absolute;
}
.triangle-left {
top: 40px;
right: 0%;
border-top: solid 40px red;
border-left: solid 40px red;
border-right: solid 40px transparent;
border-bottom: solid 40px transparent;
transform: rotate(0deg);
}
.triangle-right {
top: 40px;
left: 25%;
border-top: solid 40px red;
border-left: solid 40px transparent;
border-right: solid 40px red;
border-bottom: solid 40px transparent;
transform: rotate(0deg);
}
.triangle-top {
top: 0px;
left: 75px;
border-top: solid 0px transparent;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
border-bottom: solid 60px red;
transform: rotate(0deg);
}
/* 6.CSS实现月亮🌛 */
.moon {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0 0 burlywood;
}
</style>
</head>
<body>
<h3>1.CSS实现<u>卡片3D翻转效果</u></h3>
<section class="box">
<div class="box1"></div>
<div class="box2"></div>
</section>
<script>
//querySelector 指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
var box1 = document.querySelector(".box1");
var box2 = document.querySelector(".box2");
box1.onclick = function () {
box1.style.transform = "rotateY(-180deg)";
box2.style.transform = "rotateY(0deg)";
};
box2.onclick = function () {
box1.style.transform = "rotateY(0deg)";
box2.style.transform = "rotateY(-180deg)";
};
</script>
<h3>2.CSS实现<u>平行四边形</u></h3>
<section class="parallelogram"></section>
<h3>3.CSS实现<u>♥️桃心♥️</u></h3>
<section class="heart"></section>
<h3>4.CSS实现<u>斑马线</u></h3>
<section class="zebra"></section>
<h3>5.CSS实现<u>五角星⭐️</u></h3>
<section class="lollipop">
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>
<div class="triangle triangle-top"></div>
</section>
<h3>6.CSS实现<u>月亮🌛</u></h3>
<section class="moon"></section>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。