图片3d效果预览

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               backgroundColor="0"
               viewSourceURL="srcview/index.html">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center"
                          verticalAlign="middle"/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            [Bindable]
            private var imgArray:Array=['image11.png', 'image12.png', 'image13.png', 'image14.png', 'image15.png', 'image16.png',];
            [Bindable]
            private var imgDB:ArrayList=new ArrayList(imgArray);
        ]]>
    </fx:Script>
 
    <s:List width="900"
            dataProvider="{imgDB}"
            borderVisible="false"
            contentBackgroundColor="0"
            height="300">
        <s:layout>
            <s:HorizontalLayout columnWidth="110"
                                horizontalAlign="center"
                                verticalAlign="middle"/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer depth="0"
                                depth.hovered="1"
                                autoDrawBackground="false">
                    <s:states>
                        <s:State name="normal"/>
                        <s:State name="hovered"/>
                    </s:states>
                    <s:postLayoutTransformOffsets>
                        <s:TransformOffsets id="myTransForm"
                                            scaleX.hovered="1.5"
                                            scaleY.hovered="1.5"
                                            x.hovered="-20"
                                            y.hovered="-20"/>
                    </s:postLayoutTransformOffsets>
                    <s:transitions>
                        <s:Transition>
                            <s:Rotate3D target="{bc}"
                                        angleYFrom="0"
                                        angleYTo="360"
                                        autoCenterTransform="true"
                                        duration="600"
                                        applyChangesPostLayout="true"/>
                        </s:Transition>
                    </s:transitions>
                    <s:BorderContainer width="110"
                                       height="110"
                                       cornerRadius="2"
                                       borderVisible="false"
                                       id="bc">
                        <s:layout>
                            <s:VerticalLayout paddingBottom="5"
                                              paddingLeft="5"
                                              paddingRight="5"
                                              paddingTop="5"
                                              gap="0"/>
                        </s:layout>
                        <mx:Image source="image/{data}"
                                  width="100"
                                  height="100"/>
                    </s:BorderContainer>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:Application>