形变
形变
.box {transform: rotateX(360deg) | rotateY(360deg) | rotateZ(360deg);
}
.box {transform: translateX(200px) | translateY(200px);
}
.box {transform: scaleX(2) scaleY(0.5)
}记:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>形变</title><style type="text/css">div {width: 150px;height: 150px;background-color: red;margin: 10px auto;transition: 3s;}/*旋转形变:旋转的是角度 deg*/.d1:hover {/*transform: rotateX(3600deg);*//*transform: rotateY(3600deg);*//*transform: rotateZ(3600deg);*/transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);}/*偏移形变:偏移的是距离 px*/.d2:hover {/*transform: translateX(200px);*//*transform: translateY(200px);*/transform: translateX(200px) translateY(200px);}/*缩放形变:缩放的是比例*/.d3:hover {transform: scale(2, 0.5);}.d4:hover {/*transform: translateX(200px) rotateZ(3600deg);*/transform: rotateZ(3600deg) translateX(200px);}</style>
</head>
<body><div class="d1"></div><div class="d2"></div><div class="d3"></div><div class="d4"></div>
</body>
</html>
转载于:.html
形变
形变
.box {transform: rotateX(360deg) | rotateY(360deg) | rotateZ(360deg);
}
.box {transform: translateX(200px) | translateY(200px);
}
.box {transform: scaleX(2) scaleY(0.5)
}记:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>形变</title><style type="text/css">div {width: 150px;height: 150px;background-color: red;margin: 10px auto;transition: 3s;}/*旋转形变:旋转的是角度 deg*/.d1:hover {/*transform: rotateX(3600deg);*//*transform: rotateY(3600deg);*//*transform: rotateZ(3600deg);*/transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);}/*偏移形变:偏移的是距离 px*/.d2:hover {/*transform: translateX(200px);*//*transform: translateY(200px);*/transform: translateX(200px) translateY(200px);}/*缩放形变:缩放的是比例*/.d3:hover {transform: scale(2, 0.5);}.d4:hover {/*transform: translateX(200px) rotateZ(3600deg);*/transform: rotateZ(3600deg) translateX(200px);}</style>
</head>
<body><div class="d1"></div><div class="d2"></div><div class="d3"></div><div class="d4"></div>
</body>
</html>
转载于:.html