CSS画三角形并在限定的时间内进行移动翻转

如果想要进行图形的变化，必须要知道css3的过度与2d属性，下面我们就看一下要用到的属性，详情请点击https://www.runoob.com/css3/css3-transitions.html查看

transition语法

transition: property duration timing-function delay;

transition-property:	指定CSS属性的name，transition效果
transition-duration	transition:效果需要指定多少秒或毫秒才能完成
transition-timing-function:	指定transition效果的转速曲线
transition-delay:	定义transition效果开始的时候

transform语法

transform:translateX(n)|translateY(n)|translateZ(n);
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
translateZ(n)	定义 2D 转换，沿着 Z 轴移动元素。

1.首先画一个三角形

.arrow {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 20px solid greenyellow;
        }

2.进行变化移动

 .arrow {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 20px solid greenyellow;
            transition: 0.5s;

        }
        .arrow:hover {
            margin-left: 100px;
            transform: rotateZ(180deg);
        }

添加一个鼠标移入时间，方便观看
当鼠标移入三角形时向右移动100px 同时按Z轴旋转180deg