css3实例小项目,CSS3实现小案例

今天在学习一些css3的属性，其中比较有意思的就是transform和backface-visibility。

transform属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。我相信大家对translate和rotate以及scale是比较熟悉的。它们分别实现平移，旋转和缩放功能。但是今天我们用到的是skew属性，它可以实现倾斜转换。

backface-visibility属性定义当元素不面向屏幕时是否可见。在旋转元素不希望看到其背面时，该属性很有用。比如我们第一个小实例就会用到它。

先给大家看看实例截图，代码在文末。如有错误的地方，欢迎大家指正，让我们一起进步吧！

附上完整代码：

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;

}

1.CSS实现卡片3D翻转效果

//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)";

};

2.CSS实现平行四边形

3.CSS实现♥️桃心♥️

4.CSS实现斑马线

5.CSS实现五角星⭐️

6.CSS实现月亮🌛