CSS3中的变形处理

来源：互联网发布：zookeeper java api 编辑：程序博客网时间：2024/05/21 03:57

CSS3中的变形处理主要是旋转，缩放，移动，倾斜。

一、旋转

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3变形处理</title>    <style type="text/css">        /*旋转rotate   缩放scale   移动translate   倾斜skew */        div{            background-color: yellow;            width: 300px;            text-align: center;            margin: 150px auto;            tranform:rotate(45deg);            -webkit-transform:rotate(45deg);        }    </style></head><body>    <div>huangbaokang</div></body></html>

这里写图片描述

还有其他旋转css

transform: rotateX();transform: rotateY();transform: rotateZ();transform: rotate3d();

二、缩放

transform: scale(3.5);-webkit-transform:scale(3.5);

这里写图片描述

还有其他缩放

transform: scaleX();transform: scaleY();transform: scaleZ();transform: scale3d();

三、倾斜

transform: skew(30deg,30deg);-webkit-transform:skew(30deg,30deg);

这里写图片描述

相当

transform: skewX(30deg);transform: skewY(30deg);

四、移动

transform: translate(200px,300px);-webkit-transform:translate(200px,300px);

这里写图片描述

同理，还有其他css

transform: translateX();transform: translateY();transform: translateZ();transform: translate3d();

这些变形css都是有基准点的，在css3中可以通过transform-orgin:top right;来控制

阅读全文

0 0